chrv-components 1.12.205 → 1.12.207
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.
|
@@ -10,10 +10,10 @@ import { CommonModule, AsyncPipe, DatePipe, formatDate, DATE_PIPE_DEFAULT_OPTION
|
|
|
10
10
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
11
11
|
import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, CdkScrollable, CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
|
|
12
12
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
13
|
-
import { Subject, Observable, map, BehaviorSubject, skip, debounceTime as debounceTime$1, distinctUntilChanged, skipWhile, from, mergeMap, toArray, timer, takeUntil as takeUntil$1, of, catchError, forkJoin, take, combineLatest, switchMap, merge, finalize, tap, interval } from 'rxjs';
|
|
13
|
+
import { Subject, Observable, map, BehaviorSubject, skip, debounceTime as debounceTime$1, distinctUntilChanged, skipWhile, from, mergeMap, toArray, timer, takeUntil as takeUntil$1, of, catchError, forkJoin, take, combineLatest, defer, filter, startWith, switchMap, merge, finalize, tap, interval } from 'rxjs';
|
|
14
14
|
import { debounceTime, takeUntil, finalize as finalize$1, concatMap, switchMap as switchMap$1, tap as tap$1, catchError as catchError$1 } from 'rxjs/operators';
|
|
15
15
|
import * as i1$2 from '@angular/forms';
|
|
16
|
-
import { NG_VALIDATORS, Validators, NgControl, ReactiveFormsModule, FormsModule, FormBuilder, FormControl } from '@angular/forms';
|
|
16
|
+
import { NG_VALIDATORS, Validators, NgControl, ReactiveFormsModule, FormsModule, FormBuilder, FormControl, StatusChangeEvent, TouchedChangeEvent } from '@angular/forms';
|
|
17
17
|
import { isValid, isBefore, formatDate as formatDate$1 } from 'date-fns';
|
|
18
18
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
19
19
|
import { MatError } from '@angular/material/form-field';
|
|
@@ -29,7 +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, toObservable } from '@angular/core/rxjs-interop';
|
|
32
|
+
import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
33
33
|
import { HubConnectionBuilder, HttpTransportType, LogLevel, HubConnectionState } from '@microsoft/signalr';
|
|
34
34
|
import * as i1$4 from '@angular/common/http';
|
|
35
35
|
import { HttpResponse, HttpContextToken, provideHttpClient, withXhr, withInterceptors, withXsrfConfiguration, HttpEventType } from '@angular/common/http';
|
|
@@ -4274,6 +4274,11 @@ class ChrInputComponent {
|
|
|
4274
4274
|
// public valueChanges = output<any>();
|
|
4275
4275
|
/* CODE */
|
|
4276
4276
|
constructor() {
|
|
4277
|
+
/**
|
|
4278
|
+
* NgControl attached to this input if there is any
|
|
4279
|
+
*/
|
|
4280
|
+
this.ngControl = signal(inject(NgControl, { optional: true, self: true }), /* @ts-ignore */
|
|
4281
|
+
...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
|
|
4277
4282
|
/**
|
|
4278
4283
|
* Label of the input
|
|
4279
4284
|
*/
|
|
@@ -4328,13 +4333,14 @@ class ChrInputComponent {
|
|
|
4328
4333
|
/**
|
|
4329
4334
|
* Current status of the input
|
|
4330
4335
|
*/
|
|
4331
|
-
this.isDisabled =
|
|
4332
|
-
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
4336
|
+
this.isDisabled = toSignal(defer(() => this.ngControl()?.control?.events || of()).pipe(filter((e) => e instanceof StatusChangeEvent), map((e) => e.status === 'DISABLED'), startWith(this.ngControl()?.control?.disabled ?? false)), { initialValue: false });
|
|
4333
4337
|
/**
|
|
4334
4338
|
* Current touch status of the input
|
|
4335
4339
|
*/
|
|
4336
|
-
this.isTouched =
|
|
4337
|
-
|
|
4340
|
+
this.isTouched = toSignal(defer(() => this.ngControl()?.control?.events || of()).pipe(filter((e) => e instanceof TouchedChangeEvent), map((e) => e.touched),
|
|
4341
|
+
// Start with will inject a starting value, it MUST be used after eventual transformation (here Event -> boolean)
|
|
4342
|
+
// and contain the type of the final data
|
|
4343
|
+
startWith(this.ngControl()?.control?.touched ?? false)), { initialValue: false });
|
|
4338
4344
|
/**
|
|
4339
4345
|
* Current focus status of the input
|
|
4340
4346
|
*/
|
|
@@ -4360,11 +4366,6 @@ class ChrInputComponent {
|
|
|
4360
4366
|
*/
|
|
4361
4367
|
this.maxLength = input(/* @ts-ignore */
|
|
4362
4368
|
...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
4363
|
-
/**
|
|
4364
|
-
* NgControl attached to this input if there is any
|
|
4365
|
-
*/
|
|
4366
|
-
this.ngControl = model(null, /* @ts-ignore */
|
|
4367
|
-
...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
|
|
4368
4369
|
/**
|
|
4369
4370
|
* Tooltip text to display when hovering over the input
|
|
4370
4371
|
*/
|
|
@@ -4409,7 +4410,6 @@ class ChrInputComponent {
|
|
|
4409
4410
|
this.focus = output();
|
|
4410
4411
|
this.enter = output();
|
|
4411
4412
|
this.blur = output();
|
|
4412
|
-
this.ngControl.set(inject(NgControl, { optional: true, self: true }));
|
|
4413
4413
|
this.ensureNgControl();
|
|
4414
4414
|
effect(() => {
|
|
4415
4415
|
const value = this.value();
|
|
@@ -4450,15 +4450,12 @@ class ChrInputComponent {
|
|
|
4450
4450
|
}
|
|
4451
4451
|
configureEventListeners() {
|
|
4452
4452
|
this.blur.subscribe((data) => {
|
|
4453
|
-
// this.blur.emit();
|
|
4454
4453
|
this.isFocused.set(false);
|
|
4454
|
+
this._onTouched();
|
|
4455
4455
|
this.ensureState(this.ngControl()?.status || null);
|
|
4456
|
-
// this.state.set(this._getState(this.ngControl()?.status || null));
|
|
4457
4456
|
});
|
|
4458
4457
|
this.focus.subscribe((data) => {
|
|
4459
|
-
this._onTouched();
|
|
4460
4458
|
this.isFocused.set(true);
|
|
4461
|
-
this.isTouched.set(true);
|
|
4462
4459
|
});
|
|
4463
4460
|
this.ngControl()?.statusChanges?.subscribe((data) => {
|
|
4464
4461
|
this.ensureState(data);
|
|
@@ -4472,7 +4469,7 @@ class ChrInputComponent {
|
|
|
4472
4469
|
const control = this.ngControl();
|
|
4473
4470
|
if (control != null) {
|
|
4474
4471
|
control.valueAccessor = this;
|
|
4475
|
-
this.setDisabledState(this.ngControl()?.disabled ?? false);
|
|
4472
|
+
// this.setDisabledState(this.ngControl()?.disabled ?? false);
|
|
4476
4473
|
}
|
|
4477
4474
|
}
|
|
4478
4475
|
ensureRequired() {
|
|
@@ -4551,22 +4548,22 @@ class ChrInputComponent {
|
|
|
4551
4548
|
}
|
|
4552
4549
|
registerOnChange(fn) {
|
|
4553
4550
|
this._onChange = (v) => {
|
|
4554
|
-
this.isTouched.set(true);
|
|
4551
|
+
// this.isTouched.set(true);
|
|
4555
4552
|
fn(v);
|
|
4556
4553
|
};
|
|
4557
4554
|
}
|
|
4558
4555
|
registerOnTouched(fn) {
|
|
4559
4556
|
this._onTouched = () => {
|
|
4560
|
-
this.isTouched.set(true);
|
|
4557
|
+
// this.isTouched.set(true);
|
|
4561
4558
|
fn();
|
|
4562
4559
|
};
|
|
4563
4560
|
}
|
|
4564
4561
|
focusInput() {
|
|
4565
4562
|
this._element.focus();
|
|
4566
4563
|
}
|
|
4567
|
-
setDisabledState(isDisabled) {
|
|
4568
|
-
|
|
4569
|
-
}
|
|
4564
|
+
// public setDisabledState(isDisabled: boolean): void {
|
|
4565
|
+
// this.isDisabled.set(isDisabled);
|
|
4566
|
+
// }
|
|
4570
4567
|
getLastError() {
|
|
4571
4568
|
const errorDisplays = BaseErrorDisplays;
|
|
4572
4569
|
const control = this.ngControl()?.control;
|
|
@@ -4596,12 +4593,12 @@ class ChrInputComponent {
|
|
|
4596
4593
|
return status;
|
|
4597
4594
|
}
|
|
4598
4595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4599
|
-
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 }, isIndicatorsOpen: { classPropertyName: "isIndicatorsOpen", publicName: "isIndicatorsOpen", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", isIndicatorsOpen: "isIndicatorsOpenChange", required: "requiredChange", state: "stateChange", input: "input", change: "change", 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 @if(label()?.trim()){\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n }\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 (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n (keyup.enter)=\"enter.emit()\" />\n\n <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){padding-left:.125rem;opacity:1;transform:translate(0);border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:focus-within .input,.input-wrapper:hover .input,.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }] }); }
|
|
4596
|
+
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 }, 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, isIndicatorsOpen: { classPropertyName: "isIndicatorsOpen", publicName: "isIndicatorsOpen", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isFocused: "isFocusedChange", isIndicatorsOpen: "isIndicatorsOpenChange", required: "requiredChange", state: "stateChange", input: "input", change: "change", 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 @if(label()?.trim()){\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n }\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 (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n (keyup.enter)=\"enter.emit()\" />\n\n <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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"] }, { kind: "directive", type: OutsideClickAwareDirective, selector: "[OutsideClickAware]", inputs: ["OutsideClickAware"], outputs: ["outsideClick"] }] }); }
|
|
4600
4597
|
}
|
|
4601
4598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
|
|
4602
4599
|
type: Component,
|
|
4603
|
-
args: [{ selector: 'chr-input', imports: [ChrPopoverDirective, OutsideClickAwareDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n @if(label()?.trim()){\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n }\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 (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n (keyup.enter)=\"enter.emit()\" />\n\n <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
4604
|
-
}], 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 }] }],
|
|
4600
|
+
args: [{ selector: 'chr-input', imports: [ChrPopoverDirective, OutsideClickAwareDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n @if(label()?.trim()){\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n }\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 (change)=\"change.emit($event)\" [step]=\"type() == 'time-seconds' ? 1 : step()\"\n (keyup.enter)=\"enter.emit()\" />\n\n <span [OutsideClickAware]=\"true\" class=\"indicators\" [attr.data-indicators-open]=\"isIndicatorsOpen()\"\n (click)=\"isIndicatorsOpen.set(true)\" (outsideClick)=\"isIndicatorsOpen.set(false)\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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"] }]
|
|
4601
|
+
}], 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 }] }], 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 }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isIndicatorsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIndicatorsOpen", required: false }] }, { type: i0.Output, args: ["isIndicatorsOpenChange"] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], debouncedInput: [{ type: i0.Output, args: ["debouncedInput"] }], focus: [{ type: i0.Output, args: ["focus"] }], enter: [{ type: i0.Output, args: ["enter"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
|
|
4605
4602
|
class ChrInputIndicators {
|
|
4606
4603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4607
4604
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ChrInputIndicators, isStandalone: true, selector: "chr-input-indicators", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;align-items:center}\n"] }); }
|
|
@@ -4904,7 +4901,7 @@ class ChrFileInputComponent extends ChrInputComponent {
|
|
|
4904
4901
|
return crypto.randomUUID();
|
|
4905
4902
|
}
|
|
4906
4903
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n @if(allowChangingFileName()){\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n type=\"text\"></chr-input>\n }@else {\n <span class=\"file-name\">{{\n entry.file.name }}\n </span>\n }\n <span>.{{entry.file.extension}}</span>\n </div>\n <div class=\"file-name\">\n <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n <span class=\"file-content\">|</span>\n <span class=\"file-content\">{{ entry.file.contentType }}</span>\n </div>\n </div>\n @if(dataTemplateRef()){\n <div class=\"file-data\">\n <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n </ng-container>\n </div>\n }\n <div class=\"file-data full-width\">\n @if (entry.error) {\n <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n } @else if (getFileValidationError($index); as validationError) {\n <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n }\n </div>\n </div>\n <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n <span class=\"material-symbols\">close</span>\n </button>\n <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n </div>\n </div>\n }\n @if(multiple()){\n <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n <span class=\"material-symbols\">add</span>\n </button>\n }\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "
|
|
4904
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrFileInputComponent, isStandalone: true, selector: "chr-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, base64: { classPropertyName: "base64", publicName: "base64", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, allowChangingFileName: { classPropertyName: "allowChangingFileName", publicName: "allowChangingFileName", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "dataTemplateRef", first: true, predicate: ["data"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "dataTemplateControls", predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileNativeInput", first: true, predicate: ["fileNativeInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-input-wrapper\">\n <!-- Zone de Drop & S\u00E9lection (remplace visuellement l'input texte standard) -->\n <div class=\"drop-zone\" [hidden]=\"files().length>0\" [class.dragging]=\"isDragging()\" [class.disabled]=\"isDisabled()\"\n (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\">\n\n <input #fileNativeInput #input type=\"file\" class=\"native-file-input\" [accept]=\"accept()\" [multiple]=\"multiple()\"\n (change)=\"onFileSelected($event)\" />\n\n <div class=\"drop-zone-content\">\n <span class=\"material-symbols upload-icon\">cloud_upload</span>\n <div class=\"drop-zone-text\">\n <span class=\"primary-text\">\n @if (label()) { {{ label() }} } @else { Cliquez ou glissez un fichier ici }\n </span>\n <span class=\"secondary-text\">\n {{ multiple() ? 'S\u00E9lectionnez un ou plusieurs fichiers' : 'S\u00E9lectionnez un fichier' }}\n </span>\n </div>\n </div>\n </div>\n\n\n <!-- Liste des fichiers s\u00E9lectionn\u00E9s sous forme de cartes/puces -->\n @if (files().length > 0) {\n <div class=\"file-list\">\n @for (entry of files(); track entry.id) {\n <div class=\"file-item\" [class.error]=\"entry.error || getFileValidationError($index)\">\n <span class=\"material-symbols file-icon\">{{ entry.error || getFileValidationError($index) ? 'error' :\n 'description' }}</span>\n <div class=\"file-info\">\n <div class=\"file-data\" [class.full-width]=\"dataTemplateRef() == undefined\">\n <div class=\"file-name\">\n @if(allowChangingFileName()){\n <chr-input [value]=\"entry.file.name\"\n (valueChange)=\"entry.file.name=$event?.trim()??entry.file.file!.name.split('.')[0];onChange(this.value())\"\n type=\"text\"></chr-input>\n }@else {\n <span class=\"file-name\">{{\n entry.file.name }}\n </span>\n }\n <span>.{{entry.file.extension}}</span>\n </div>\n <div class=\"file-name\">\n <span class=\"file-size\">{{ formatFileSize(entry.file.file?.size ?? 0) }}</span>\n <span class=\"file-content\">|</span>\n <span class=\"file-content\">{{ entry.file.contentType }}</span>\n </div>\n </div>\n @if(dataTemplateRef()){\n <div class=\"file-data\">\n <ng-container *ngTemplateOutlet=\"dataTemplateRef(); context: { $implicit: entry.file}\">\n </ng-container>\n </div>\n }\n <div class=\"file-data full-width\">\n @if (entry.error) {\n <span class=\"file-error\" role=\"alert\">{{ entry.error }}</span>\n } @else if (getFileValidationError($index); as validationError) {\n <span class=\"file-error\" role=\"alert\">{{ validationError }}</span>\n }\n </div>\n </div>\n <button type=\"button\" class=\"file-remove-btn\" (click)=\"removeFile($index, $event)\"\n [attr.aria-label]=\"'Supprimer ' + entry.file.file?.name\">\n <span class=\"material-symbols\">close</span>\n </button>\n <div class=\"file-progress\" [class.error]=\"entry.error || getFileValidationError($index)\" role=\"progressbar\"\n [attr.aria-label]=\"entry.error || getFileValidationError($index) || 'Progression de la conversion'\"\n [attr.aria-valuenow]=\"entry.progress\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"file-progress-value\" [style.width.%]=\"entry.progress\"></div>\n </div>\n </div>\n }\n @if(multiple()){\n <button class=\"file-item fixed-size file-add-btn\" (click)=\"triggerFileSelect()\">\n <span class=\"material-symbols\">add</span>\n </button>\n }\n </div>\n }\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.file-input-wrapper{display:flex;flex-direction:column;gap:.75rem;width:100%}.native-file-input{display:none}.drop-zone{border:2px dashed var(--neutral-color);border-radius:.5rem;padding:1.25rem 1rem;background-color:var(--background-color);cursor:pointer;transition:all .2s ease-in-out}.drop-zone:hover:not(.disabled){border-color:var(--primary-color);background-color:var(--background-neutral-color)}.drop-zone.dragging{border-color:var(--tertiary-color);background-color:var(--background-neutral-color)}.drop-zone.disabled{opacity:.6;cursor:not-allowed}.drop-zone-content{display:flex;align-items:center;justify-content:center;gap:.75rem}.upload-icon{font-size:2rem;color:color-mix(in srgb,var(--primary-color) 80%,transparent 20%)}.drop-zone-text{display:flex;flex-direction:column}.primary-text{font-size:.875rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.75rem;color:var(--text-neutral-color)}.file-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}.file-item{position:relative;display:flex;flex:1 1 auto;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--background-color);border:1px solid var(--neutral-color);border-radius:.375rem;overflow:hidden}.file-item.fixed-size{flex:0 1 auto}.file-item.error{border-color:var(--error-color)}.file-icon{font-size:1.25rem;color:var(--text-neutral-color)}.file-info{display:grid;flex:1 1 auto;grid-template-columns:1fr 1fr}.file-data{grid-column:span 1;border-left:1px solid var(--neutral-color);padding-left:.5rem}.file-data.full-width{grid-column:span 2}.file-data:not(:last-of-type){padding-right:.5rem}.file-name{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;font-size:.8125rem;font-weight:500;white-space:nowrap}.file-size,.file-content{font-size:.6875rem;color:var(--text-neutral-color)}.file-content{margin-left:.25rem}.file-error{color:var(--error-color);font-size:.6875rem}.file-remove-btn{background:transparent;border:none;color:var(--text-neutral-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:color .15s,background-color .15s}.file-remove-btn:hover{color:var(--error-color);background-color:color-mix(in srgb,var(--error-color) 10%,transparent 90%)}.file-remove-btn .material-symbols{font-size:1rem}.file-add-btn{color:var(--text-neutral-color);cursor:pointer}.file-add-btn:hover{color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%)}.file-progress{position:absolute;right:0;bottom:0;left:0;height:.2rem;background-color:color-mix(in srgb,var(--neutral-color) 55%,transparent 45%)}.file-progress-value{height:100%;background-color:var(--primary-color);transition:width .15s ease-out}.file-progress.error{background-color:color-mix(in srgb,var(--error-color) 20%,transparent 80%)}.file-progress.error .file-progress-value{background-color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isFocused", "min", "max", "minLength", "maxLength", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isFocusedChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }] }); }
|
|
4908
4905
|
}
|
|
4909
4906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrFileInputComponent, decorators: [{
|
|
4910
4907
|
type: Component,
|
|
@@ -4931,7 +4928,7 @@ class ChrPasswordInputComponent extends ChrInputComponent {
|
|
|
4931
4928
|
};
|
|
4932
4929
|
}
|
|
4933
4930
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\"
|
|
4931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\">\n <chr-input-indicators>\n <ng-content select=\"chr-input-indicators\"></ng-content>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n <chr-input-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 </chr-input-data-overlay>\n <chr-input-data>\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isFocused", "min", "max", "minLength", "maxLength", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isFocusedChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }] }); }
|
|
4935
4932
|
}
|
|
4936
4933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, decorators: [{
|
|
4937
4934
|
type: Component,
|
|
@@ -4940,7 +4937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4940
4937
|
ChrInputIndicators,
|
|
4941
4938
|
ChrInputDataOverlay,
|
|
4942
4939
|
ChrInputData,
|
|
4943
|
-
], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\"
|
|
4940
|
+
], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\">\n <chr-input-indicators>\n <ng-content select=\"chr-input-indicators\"></ng-content>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n <chr-input-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 </chr-input-data-overlay>\n <chr-input-data>\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"] }]
|
|
4944
4941
|
}] });
|
|
4945
4942
|
|
|
4946
4943
|
class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
@@ -4980,7 +4977,7 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
|
4980
4977
|
return formated;
|
|
4981
4978
|
}
|
|
4982
4979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4983
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <!-- @if(isFocused()){ -->\r\n @if(value() == null){\r\n <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n [class.indicator-error]=\"required()\">close</span>\r\n }@else {\r\n <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n }\r\n <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n <!-- } -->\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n </chr-input-data-overlay>\r\n </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
4980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <!-- @if(isFocused()){ -->\r\n @if(value() == null){\r\n <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n [class.indicator-error]=\"required()\">close</span>\r\n }@else {\r\n <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n }\r\n <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n <!-- } -->\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n </chr-input-data-overlay>\r\n </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isFocused", "min", "max", "minLength", "maxLength", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isFocusedChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
|
|
4984
4981
|
}
|
|
4985
4982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, decorators: [{
|
|
4986
4983
|
type: Component,
|
|
@@ -4990,7 +4987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4990
4987
|
ChrInputIndicators,
|
|
4991
4988
|
DataListComponent,
|
|
4992
4989
|
ChrInputDataOverlay,
|
|
4993
|
-
], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <!-- @if(isFocused()){ -->\r\n @if(value() == null){\r\n <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n [class.indicator-error]=\"required()\">close</span>\r\n }@else {\r\n <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n }\r\n <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n <!-- } -->\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n </chr-input-data-overlay>\r\n </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
4990
|
+
], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <!-- @if(isFocused()){ -->\r\n @if(value() == null){\r\n <span class=\"material-symbols selection-status-indicator\" [class.indicator-warning]=\"!required()\"\r\n [class.indicator-error]=\"required()\">close</span>\r\n }@else {\r\n <span class=\"material-symbols selection-status-indicator indicator-success\">check</span>\r\n }\r\n <span class=\"selection-status-indicator indicator-spacer\"></span>\r\n <!-- } -->\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\r\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\r\n </chr-input-data-overlay>\r\n </chr-input>\r\n</div>\r\n\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<div class=\"data\">\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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;min-width:0}.input-wrapper{position:relative;min-height:1.5rem;max-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.indicator-success{color:var(--success-color)}.selection-status-indicator.indicator-warning{color:var(--warn-color)}.selection-status-indicator.indicator-error{color:var(--error-color)}.selection-status-indicator.indicator-spacer{width:1rem}\n"] }]
|
|
4994
4991
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
|
|
4995
4992
|
|
|
4996
4993
|
class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
@@ -5039,7 +5036,7 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
|
5039
5036
|
return '';
|
|
5040
5037
|
}
|
|
5041
5038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <!-- Champ de recherche enfant -->\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <span class=\"material-symbols\">data_array</span>\r\n <span style=\"width: 1rem;\"></span>\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n </chr-data-list>\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n </chr-input-data-overlay>\r\n <chr-input-data>\r\n\r\n </chr-input-data>\r\n </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n <!-- Affichage des Tags (Chips) -->\r\n @if (selectedItems().length > 0) {\r\n <div class=\"tags-container\">\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"tag-chip\">\r\n <span class=\"tag-label\">{{ display()(item) }}</span>\r\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n <span class=\"material-symbols\">close</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <!-- Champ de recherche enfant -->\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <span class=\"material-symbols\">data_array</span>\r\n <span style=\"width: 1rem;\"></span>\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n </chr-data-list>\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n </chr-input-data-overlay>\r\n <chr-input-data>\r\n\r\n </chr-input-data>\r\n </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n <!-- Affichage des Tags (Chips) -->\r\n @if (selectedItems().length > 0) {\r\n <div class=\"tags-container\">\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"tag-chip\">\r\n <span class=\"tag-label\">{{ display()(item) }}</span>\r\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n <span class=\"material-symbols\">close</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isFocused", "min", "max", "minLength", "maxLength", "tooltip", "isIndicatorsOpen", "tooltipPosition", "required", "state", "errors"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isFocusedChange", "isIndicatorsOpenChange", "requiredChange", "stateChange", "input", "change", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
|
|
5043
5040
|
}
|
|
5044
5041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, decorators: [{
|
|
5045
5042
|
type: Component,
|
|
@@ -5050,7 +5047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5050
5047
|
DataListComponent,
|
|
5051
5048
|
ChrInputData,
|
|
5052
5049
|
ChrInputDataOverlay,
|
|
5053
|
-
], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <!-- Champ de recherche enfant -->\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <span class=\"material-symbols\">data_array</span>\r\n <span style=\"width: 1rem;\"></span>\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n </chr-data-list>\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n </chr-input-data-overlay>\r\n <chr-input-data>\r\n\r\n </chr-input-data>\r\n </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n <!-- Affichage des Tags (Chips) -->\r\n @if (selectedItems().length > 0) {\r\n <div class=\"tags-container\">\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"tag-chip\">\r\n <span class=\"tag-label\">{{ display()(item) }}</span>\r\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n <span class=\"material-symbols\">close</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5050
|
+
], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\r\n <!-- Champ de recherche enfant -->\r\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\r\n [required]=\"required()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [state]=\"state()\"\r\n [errors]=\"ngControl()?.errors\" [value]=\"displayValue()\" (input)=\"dl.open()\">\r\n\r\n <chr-input-indicators>\r\n <ng-content select=\"chr-input-indicators\"></ng-content>\r\n <span class=\"material-symbols\">data_array</span>\r\n <span style=\"width: 1rem;\"></span>\r\n </chr-input-indicators>\r\n <chr-input-data-overlay>\r\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\r\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\r\n </chr-data-list>\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n </chr-input-data-overlay>\r\n <chr-input-data>\r\n\r\n </chr-input-data>\r\n </chr-input>\r\n</div>\r\n\r\n<!-- No-height slot. Should be used for \"overlay\" type data-->\r\n<div class=\"data-overlay\">\r\n @if(isTouched()){\r\n @let error = getLastError();\r\n @if(error != null){\r\n <div class=\"error card glass\">\r\n {{getLastError() ?? null}}\r\n </div>\r\n }\r\n }\r\n <ng-content select=\"chr-input-data-overlay\">\r\n </ng-content>\r\n</div>\r\n<!-- Default \"space-consuming\" Content Projection -->\r\n<div class=\"data\">\r\n <!-- Affichage des Tags (Chips) -->\r\n @if (selectedItems().length > 0) {\r\n <div class=\"tags-container\">\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"tag-chip\">\r\n <span class=\"tag-label\">{{ display()(item) }}</span>\r\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\r\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\r\n <span class=\"material-symbols\">close</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"chr-input-data\">\r\n <!-- Fallback to default projection-->\r\n <ng-content></ng-content>\r\n </ng-content>\r\n</div>", styles: [".input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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;min-width:0}.input-wrapper{position:relative;min-height:fit-content;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:none}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"] }]
|
|
5054
5051
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
|
|
5055
5052
|
|
|
5056
5053
|
class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
@@ -5064,11 +5061,11 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
|
5064
5061
|
};
|
|
5065
5062
|
}
|
|
5066
5063
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5064
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
5068
5065
|
}
|
|
5069
5066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
|
|
5070
5067
|
type: Component,
|
|
5071
|
-
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5068
|
+
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;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{max-height:none;height:auto}.input-wrapper .input{height:1.5rem}\n"] }]
|
|
5072
5069
|
}], ctorParameters: () => [] });
|
|
5073
5070
|
|
|
5074
5071
|
class ChrToggleInputComponent extends ChrInputComponent {
|
|
@@ -5082,11 +5079,11 @@ class ChrToggleInputComponent extends ChrInputComponent {
|
|
|
5082
5079
|
super.ngOnInit();
|
|
5083
5080
|
}
|
|
5084
5081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }); }
|
|
5086
5083
|
}
|
|
5087
5084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, decorators: [{
|
|
5088
5085
|
type: Component,
|
|
5089
|
-
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){
|
|
5086
|
+
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;box-sizing:border-box;min-height:1.5rem;max-height:1.5rem;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;height:inherit}.input-wrapper .input{min-width:0;height:inherit;color:var(--text-color)}.input-wrapper .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;gap:.25rem;max-width:fit-content;height:inherit;align-items:center;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input~.indicators{position:absolute;top:0;right:0;visibility:hidden;opacity:0;transform:translate(1rem);transition:opacity .15s ease-in-out,transform .15s ease-in-out,width .15s ease-in-out .15s}.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]{position:relative;visibility:visible;padding-left:.125rem;opacity:1;transform:translate(0)}:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(chr-input-indicators:not(:empty)),:is(.input-wrapper:focus-within .input~.indicators,.input-wrapper:hover .input~.indicators,.input-wrapper .input~.indicators[data-indicators-open=true]):has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper:has(.indicators[data-indicators-open=true]) .input{padding-right:.125rem}.input-wrapper .input:has(~.indicators:empty){padding-right:0}.input-wrapper .input~.indicators:empty{width:0;border-left:none;padding-left:0}.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;pointer-events:none;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:not(:empty):after{position:absolute;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;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;border-top-left-radius:0;border-top-right-radius:0;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }]
|
|
5090
5087
|
}], ctorParameters: () => [] });
|
|
5091
5088
|
|
|
5092
5089
|
class ChrSearchbarComponent {
|