@telcomdev/ui 0.0.7 → 0.0.8
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.
- package/README.md +34 -0
- package/fesm2022/telcomdev-ui.mjs +255 -108
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +96 -38
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, ChangeDetectorRef,
|
|
2
|
+
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/cdk/scrolling';
|
|
4
4
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { ScrollStrategyOptions, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
8
|
+
import { FORM_FIELD } from '@angular/forms/signals';
|
|
8
9
|
import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
9
10
|
import { NgComponentOutlet, DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
10
11
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
@@ -863,9 +864,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
863
864
|
type: Output
|
|
864
865
|
}] } });
|
|
865
866
|
|
|
867
|
+
/**
|
|
868
|
+
* Puente reutilizable entre Signal Forms y ControlValueAccessor.
|
|
869
|
+
*
|
|
870
|
+
* Los inputs del contrato se declaran en cada componente porque el compilador
|
|
871
|
+
* de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
|
|
872
|
+
*/
|
|
873
|
+
function createTdFormControlBridge() {
|
|
874
|
+
const injector = inject(Injector);
|
|
875
|
+
const cdr = inject(ChangeDetectorRef);
|
|
876
|
+
const cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
877
|
+
let onCvaTouched = () => undefined;
|
|
878
|
+
const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
|
|
879
|
+
return {
|
|
880
|
+
get usesSignalForms() {
|
|
881
|
+
return usesSignalForms();
|
|
882
|
+
},
|
|
883
|
+
isDisabled(fieldDisabled) {
|
|
884
|
+
return usesSignalForms() ? fieldDisabled : fieldDisabled || cvaDisabled();
|
|
885
|
+
},
|
|
886
|
+
registerOnTouched(fn) {
|
|
887
|
+
onCvaTouched = fn;
|
|
888
|
+
},
|
|
889
|
+
setDisabledState(disabled) {
|
|
890
|
+
if (!usesSignalForms())
|
|
891
|
+
cvaDisabled.set(disabled);
|
|
892
|
+
cdr.markForCheck();
|
|
893
|
+
},
|
|
894
|
+
markTouched(touched, touch) {
|
|
895
|
+
// Angular prioriza el CVA cuando el control también publica NG_VALUE_ACCESSOR,
|
|
896
|
+
// incluso si está enlazado mediante [formField]. Mantener esta llamada permite
|
|
897
|
+
// que Signal Forms marque el field como touched sin perder compatibilidad clásica.
|
|
898
|
+
onCvaTouched();
|
|
899
|
+
touched.set(true);
|
|
900
|
+
touch.emit();
|
|
901
|
+
},
|
|
902
|
+
};
|
|
903
|
+
}
|
|
904
|
+
|
|
866
905
|
let datePickerSequence = 0;
|
|
867
906
|
class TdDatePicker {
|
|
868
907
|
cdr = inject(ChangeDetectorRef);
|
|
908
|
+
formBridge = createTdFormControlBridge();
|
|
869
909
|
scrollStrategies = inject(ScrollStrategyOptions);
|
|
870
910
|
generatedId = `td-date-picker-${++datePickerSequence}`;
|
|
871
911
|
formatter = new Intl.DateTimeFormat('es-PE', {
|
|
@@ -887,20 +927,26 @@ class TdDatePicker {
|
|
|
887
927
|
placeholder = 'Selecciona una fecha';
|
|
888
928
|
mode = 'fecha';
|
|
889
929
|
hint = '';
|
|
890
|
-
|
|
891
|
-
minDate = null;
|
|
892
|
-
maxDate = null;
|
|
930
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
893
931
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
932
|
+
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
894
933
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
934
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
895
935
|
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
936
|
+
pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
937
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
938
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
896
939
|
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
940
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
897
941
|
touch = output();
|
|
942
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
943
|
+
minDate = null;
|
|
944
|
+
maxDate = null;
|
|
898
945
|
clearable = true;
|
|
899
946
|
dark = false;
|
|
900
947
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
948
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
949
|
+
displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
904
950
|
hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
905
951
|
selectionChange = new EventEmitter();
|
|
906
952
|
openedChange = new EventEmitter();
|
|
@@ -1007,7 +1053,6 @@ class TdDatePicker {
|
|
|
1007
1053
|
return this.currentRange()?.fin ? this.format(this.currentRange().fin) : 'Sin elegir';
|
|
1008
1054
|
}
|
|
1009
1055
|
changed = () => undefined;
|
|
1010
|
-
onCvaTouched = () => undefined;
|
|
1011
1056
|
writeValue(value) {
|
|
1012
1057
|
this.value.set(this.normalizeValue(value));
|
|
1013
1058
|
this.syncViewToValue();
|
|
@@ -1017,11 +1062,10 @@ class TdDatePicker {
|
|
|
1017
1062
|
this.changed = fn;
|
|
1018
1063
|
}
|
|
1019
1064
|
registerOnTouched(fn) {
|
|
1020
|
-
this.
|
|
1065
|
+
this.formBridge.registerOnTouched(fn);
|
|
1021
1066
|
}
|
|
1022
1067
|
setDisabledState(disabled) {
|
|
1023
|
-
this.
|
|
1024
|
-
this.cdr.markForCheck();
|
|
1068
|
+
this.formBridge.setDisabledState(disabled);
|
|
1025
1069
|
}
|
|
1026
1070
|
focus() {
|
|
1027
1071
|
document.getElementById(this.labelId)?.parentElement?.querySelector('button')?.focus();
|
|
@@ -1044,8 +1088,7 @@ class TdDatePicker {
|
|
|
1044
1088
|
return;
|
|
1045
1089
|
this.open = false;
|
|
1046
1090
|
this.hoveredDate = null;
|
|
1047
|
-
this.
|
|
1048
|
-
this.touch.emit();
|
|
1091
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
1049
1092
|
this.openedChange.emit(false);
|
|
1050
1093
|
}
|
|
1051
1094
|
previousPage() {
|
|
@@ -1224,7 +1267,7 @@ class TdDatePicker {
|
|
|
1224
1267
|
(typeof this.maxDate === 'string' && first > this.maxDate));
|
|
1225
1268
|
}
|
|
1226
1269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDatePicker, isStandalone: true, selector: "td-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null },
|
|
1270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDatePicker, isStandalone: true, selector: "td-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
1228
1271
|
{
|
|
1229
1272
|
provide: NG_VALUE_ACCESSOR,
|
|
1230
1273
|
useExisting: forwardRef(() => TdDatePicker),
|
|
@@ -1245,6 +1288,9 @@ class TdDatePicker {
|
|
|
1245
1288
|
type="button"
|
|
1246
1289
|
class="td-date-picker__trigger"
|
|
1247
1290
|
[disabled]="isDisabled()"
|
|
1291
|
+
[attr.aria-readonly]="readonly()"
|
|
1292
|
+
[attr.aria-required]="required()"
|
|
1293
|
+
[attr.aria-invalid]="hasError()"
|
|
1248
1294
|
[attr.aria-labelledby]="labelId"
|
|
1249
1295
|
[attr.aria-expanded]="open"
|
|
1250
1296
|
[attr.aria-controls]="calendarId"
|
|
@@ -1415,6 +1461,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1415
1461
|
type="button"
|
|
1416
1462
|
class="td-date-picker__trigger"
|
|
1417
1463
|
[disabled]="isDisabled()"
|
|
1464
|
+
[attr.aria-readonly]="readonly()"
|
|
1465
|
+
[attr.aria-required]="required()"
|
|
1466
|
+
[attr.aria-invalid]="hasError()"
|
|
1418
1467
|
[attr.aria-labelledby]="labelId"
|
|
1419
1468
|
[attr.aria-expanded]="open"
|
|
1420
1469
|
[attr.aria-controls]="calendarId"
|
|
@@ -1572,7 +1621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1572
1621
|
useExisting: forwardRef(() => TdDatePicker),
|
|
1573
1622
|
multi: true,
|
|
1574
1623
|
},
|
|
1575
|
-
],
|
|
1624
|
+
], host: {
|
|
1625
|
+
'[hidden]': 'hidden()',
|
|
1626
|
+
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
1627
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: #fff;--td-date-border: #dfe3eb;--td-date-text: #263147;--td-date-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: #19191f;--td-date-border: #34343e;--td-date-text: #ededf0;--td-date-muted: #a1a1aa}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:#8d80e8}.td-date-picker--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-date-picker--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-date-picker--disabled{opacity:.58;background:#f5f6f8}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:#5746d8}.td-date-picker--error>label{color:#d33f3f}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:.45rem;color:var(--td-date-muted)}.td-date-picker__clear:hover{color:#5746d8;background:#f2f0ff}.td-date-picker__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem}.td-date-picker__message--error{color:#c43636}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid #e1e5ee;border-radius:1rem;padding:.8rem;color:#263147;background:#fff;box-shadow:0 22px 55px #0f172a33;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:#5746d8;background:#f2f0ff}.td-calendar--dark .td-calendar__header button:hover{background:#2b293d}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:#f7f7fb}.td-calendar--dark .td-calendar__range-summary{background:#292931}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:#748096;font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:#8791a4;font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__day--range{border-radius:0;color:#5746d8;background:#efedff}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:#fff;background:#5746d8;box-shadow:0 5px 12px #5746d83d}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:#b9b0fa;background:#2b293d}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:#fff!important;background:#5746d8!important;box-shadow:0 5px 12px #5746d838}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid #e6e9f0;padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:#34343e}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:#5746d8!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:#f2f0ff!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"] }]
|
|
1576
1628
|
}], propDecorators: { label: [{
|
|
1577
1629
|
type: Input
|
|
1578
1630
|
}], placeholder: [{
|
|
@@ -1581,15 +1633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1581
1633
|
type: Input
|
|
1582
1634
|
}], hint: [{
|
|
1583
1635
|
type: Input
|
|
1584
|
-
}], error: [{
|
|
1585
|
-
type: Input
|
|
1586
|
-
}], minDate: [{
|
|
1636
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minDate: [{
|
|
1587
1637
|
type: Input,
|
|
1588
1638
|
args: [{ alias: 'min' }]
|
|
1589
1639
|
}], maxDate: [{
|
|
1590
1640
|
type: Input,
|
|
1591
1641
|
args: [{ alias: 'max' }]
|
|
1592
|
-
}],
|
|
1642
|
+
}], clearable: [{
|
|
1593
1643
|
type: Input
|
|
1594
1644
|
}], dark: [{
|
|
1595
1645
|
type: Input
|
|
@@ -1946,34 +1996,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1946
1996
|
let inputSequence = 0;
|
|
1947
1997
|
class TdInput {
|
|
1948
1998
|
cdr = inject(ChangeDetectorRef);
|
|
1999
|
+
formBridge = createTdFormControlBridge();
|
|
1949
2000
|
generatedId = `td-input-${++inputSequence}`;
|
|
2001
|
+
legacyMinLength = null;
|
|
2002
|
+
legacyMaxLength = null;
|
|
2003
|
+
receivedNullValue = false;
|
|
2004
|
+
nativeInput;
|
|
1950
2005
|
id = '';
|
|
1951
|
-
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1952
2006
|
label = 'Campo';
|
|
1953
2007
|
type = 'text';
|
|
1954
2008
|
placeholder = '';
|
|
1955
2009
|
autocomplete = 'off';
|
|
1956
2010
|
icon = '';
|
|
1957
2011
|
hint = '';
|
|
1958
|
-
|
|
1959
|
-
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2012
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1960
2013
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1961
|
-
|
|
2014
|
+
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
2015
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2016
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
1962
2017
|
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2018
|
+
pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
2019
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
2020
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1963
2021
|
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2022
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1964
2023
|
touch = output();
|
|
2024
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1965
2025
|
clearable = false;
|
|
1966
2026
|
dark = false;
|
|
1967
|
-
|
|
1968
|
-
|
|
2027
|
+
emptyValue = 'auto';
|
|
2028
|
+
minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), alias: 'min' });
|
|
2029
|
+
maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), alias: 'max' });
|
|
2030
|
+
minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
2031
|
+
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
2032
|
+
pattern = input([], ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
|
|
1969
2033
|
step = null;
|
|
1970
|
-
minlength
|
|
1971
|
-
|
|
2034
|
+
set minlength(value) {
|
|
2035
|
+
this.legacyMinLength = value;
|
|
2036
|
+
}
|
|
2037
|
+
set maxlength(value) {
|
|
2038
|
+
this.legacyMaxLength = value;
|
|
2039
|
+
}
|
|
1972
2040
|
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2041
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2042
|
+
displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
1976
2043
|
hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2044
|
+
resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength, ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
|
|
2045
|
+
resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength, ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
|
|
2046
|
+
resolvedPattern = computed(() => {
|
|
2047
|
+
const patterns = this.pattern();
|
|
2048
|
+
if (!patterns.length)
|
|
2049
|
+
return null;
|
|
2050
|
+
if (patterns.length === 1)
|
|
2051
|
+
return patterns[0].source;
|
|
2052
|
+
return patterns.map((item) => `(?=${item.source})`).join('') + '.*';
|
|
2053
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedPattern" }] : /* istanbul ignore next */ []));
|
|
1977
2054
|
focused = false;
|
|
1978
2055
|
passwordVisible = false;
|
|
1979
2056
|
get inputId() {
|
|
@@ -1986,44 +2063,75 @@ class TdInput {
|
|
|
1986
2063
|
return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
|
|
1987
2064
|
}
|
|
1988
2065
|
onChange = () => undefined;
|
|
1989
|
-
onTouched = () => undefined;
|
|
1990
2066
|
writeValue(value) {
|
|
1991
|
-
|
|
2067
|
+
if (value === null || value === undefined) {
|
|
2068
|
+
this.receivedNullValue = true;
|
|
2069
|
+
this.value.set(null);
|
|
2070
|
+
}
|
|
2071
|
+
else if (this.type === 'number' &&
|
|
2072
|
+
this.formBridge.usesSignalForms &&
|
|
2073
|
+
typeof value === 'number') {
|
|
2074
|
+
this.value.set(value);
|
|
2075
|
+
}
|
|
2076
|
+
else {
|
|
2077
|
+
this.value.set(String(value));
|
|
2078
|
+
}
|
|
1992
2079
|
this.cdr.markForCheck();
|
|
1993
2080
|
}
|
|
1994
2081
|
registerOnChange(fn) {
|
|
1995
2082
|
this.onChange = fn;
|
|
1996
2083
|
}
|
|
1997
2084
|
registerOnTouched(fn) {
|
|
1998
|
-
this.
|
|
2085
|
+
this.formBridge.registerOnTouched(fn);
|
|
1999
2086
|
}
|
|
2000
2087
|
setDisabledState(disabled) {
|
|
2001
|
-
this.
|
|
2002
|
-
|
|
2088
|
+
this.formBridge.setDisabledState(disabled);
|
|
2089
|
+
}
|
|
2090
|
+
focus(options) {
|
|
2091
|
+
this.nativeInput?.nativeElement.focus(options);
|
|
2003
2092
|
}
|
|
2004
2093
|
handleInput(event) {
|
|
2005
|
-
|
|
2094
|
+
const inputElement = event.target;
|
|
2095
|
+
this.setValue(this.parseInputValue(inputElement));
|
|
2006
2096
|
}
|
|
2007
2097
|
handleBlur() {
|
|
2008
2098
|
this.focused = false;
|
|
2009
|
-
this.
|
|
2010
|
-
this.touch.emit();
|
|
2099
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
2011
2100
|
}
|
|
2012
2101
|
clear() {
|
|
2013
|
-
this.setValue(
|
|
2102
|
+
this.setValue(this.resolveEmptyValue());
|
|
2103
|
+
}
|
|
2104
|
+
parseInputValue(inputElement) {
|
|
2105
|
+
if (!inputElement.value) {
|
|
2106
|
+
return this.resolveEmptyValue();
|
|
2107
|
+
}
|
|
2108
|
+
if (this.type !== 'number' || !this.formBridge.usesSignalForms) {
|
|
2109
|
+
return inputElement.value;
|
|
2110
|
+
}
|
|
2111
|
+
const numericValue = inputElement.valueAsNumber;
|
|
2112
|
+
return Number.isNaN(numericValue) ? null : numericValue;
|
|
2113
|
+
}
|
|
2114
|
+
resolveEmptyValue() {
|
|
2115
|
+
if (this.emptyValue === 'null')
|
|
2116
|
+
return null;
|
|
2117
|
+
if (this.emptyValue === 'empty-string')
|
|
2118
|
+
return '';
|
|
2119
|
+
if (this.formBridge.usesSignalForms && this.type === 'number')
|
|
2120
|
+
return null;
|
|
2121
|
+
return this.receivedNullValue ? null : '';
|
|
2014
2122
|
}
|
|
2015
2123
|
setValue(value) {
|
|
2016
2124
|
this.value.set(value);
|
|
2017
2125
|
this.onChange(value);
|
|
2018
2126
|
}
|
|
2019
2127
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2020
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null },
|
|
2128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", 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 }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2021
2129
|
{
|
|
2022
2130
|
provide: NG_VALUE_ACCESSOR,
|
|
2023
2131
|
useExisting: forwardRef(() => TdInput),
|
|
2024
2132
|
multi: true,
|
|
2025
2133
|
},
|
|
2026
|
-
], ngImport: i0, template: `
|
|
2134
|
+
], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], ngImport: i0, template: `
|
|
2027
2135
|
<div
|
|
2028
2136
|
class="td-input"
|
|
2029
2137
|
[class.td-input--focused]="focused"
|
|
@@ -2039,20 +2147,22 @@ class TdInput {
|
|
|
2039
2147
|
}
|
|
2040
2148
|
|
|
2041
2149
|
<input
|
|
2150
|
+
#nativeInput
|
|
2042
2151
|
[id]="inputId"
|
|
2043
2152
|
[name]="name()"
|
|
2044
2153
|
[type]="resolvedType"
|
|
2045
|
-
[value]="value()"
|
|
2154
|
+
[value]="value() ?? ''"
|
|
2046
2155
|
[placeholder]="placeholder"
|
|
2047
2156
|
[autocomplete]="autocomplete"
|
|
2048
2157
|
[disabled]="isDisabled()"
|
|
2049
2158
|
[readonly]="readonly()"
|
|
2050
2159
|
[required]="required()"
|
|
2051
|
-
[min]="minValue"
|
|
2052
|
-
[max]="maxValue"
|
|
2160
|
+
[min]="minValue()"
|
|
2161
|
+
[max]="maxValue()"
|
|
2053
2162
|
[step]="step"
|
|
2054
|
-
[attr.minlength]="
|
|
2055
|
-
[attr.maxlength]="
|
|
2163
|
+
[attr.minlength]="resolvedMinLength()"
|
|
2164
|
+
[attr.maxlength]="resolvedMaxLength()"
|
|
2165
|
+
[attr.pattern]="resolvedPattern()"
|
|
2056
2166
|
[attr.aria-describedby]="descriptionId"
|
|
2057
2167
|
[attr.aria-invalid]="hasError()"
|
|
2058
2168
|
(input)="handleInput($event)"
|
|
@@ -2108,20 +2218,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2108
2218
|
}
|
|
2109
2219
|
|
|
2110
2220
|
<input
|
|
2221
|
+
#nativeInput
|
|
2111
2222
|
[id]="inputId"
|
|
2112
2223
|
[name]="name()"
|
|
2113
2224
|
[type]="resolvedType"
|
|
2114
|
-
[value]="value()"
|
|
2225
|
+
[value]="value() ?? ''"
|
|
2115
2226
|
[placeholder]="placeholder"
|
|
2116
2227
|
[autocomplete]="autocomplete"
|
|
2117
2228
|
[disabled]="isDisabled()"
|
|
2118
2229
|
[readonly]="readonly()"
|
|
2119
2230
|
[required]="required()"
|
|
2120
|
-
[min]="minValue"
|
|
2121
|
-
[max]="maxValue"
|
|
2231
|
+
[min]="minValue()"
|
|
2232
|
+
[max]="maxValue()"
|
|
2122
2233
|
[step]="step"
|
|
2123
|
-
[attr.minlength]="
|
|
2124
|
-
[attr.maxlength]="
|
|
2234
|
+
[attr.minlength]="resolvedMinLength()"
|
|
2235
|
+
[attr.maxlength]="resolvedMaxLength()"
|
|
2236
|
+
[attr.pattern]="resolvedPattern()"
|
|
2125
2237
|
[attr.aria-describedby]="descriptionId"
|
|
2126
2238
|
[attr.aria-invalid]="hasError()"
|
|
2127
2239
|
(input)="handleInput($event)"
|
|
@@ -2163,10 +2275,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2163
2275
|
useExisting: forwardRef(() => TdInput),
|
|
2164
2276
|
multi: true,
|
|
2165
2277
|
},
|
|
2166
|
-
],
|
|
2167
|
-
|
|
2278
|
+
], host: {
|
|
2279
|
+
'[hidden]': 'hidden()',
|
|
2280
|
+
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
2281
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
|
|
2282
|
+
}], propDecorators: { nativeInput: [{
|
|
2283
|
+
type: ViewChild,
|
|
2284
|
+
args: ['nativeInput']
|
|
2285
|
+
}], id: [{
|
|
2168
2286
|
type: Input
|
|
2169
|
-
}],
|
|
2287
|
+
}], label: [{
|
|
2170
2288
|
type: Input
|
|
2171
2289
|
}], type: [{
|
|
2172
2290
|
type: Input
|
|
@@ -2178,19 +2296,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2178
2296
|
type: Input
|
|
2179
2297
|
}], hint: [{
|
|
2180
2298
|
type: Input
|
|
2181
|
-
}], error: [{
|
|
2182
|
-
type: Input
|
|
2183
|
-
}], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], clearable: [{
|
|
2299
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], clearable: [{
|
|
2184
2300
|
type: Input
|
|
2185
2301
|
}], dark: [{
|
|
2186
2302
|
type: Input
|
|
2187
|
-
}],
|
|
2188
|
-
type: Input
|
|
2189
|
-
|
|
2190
|
-
}], maxValue: [{
|
|
2191
|
-
type: Input,
|
|
2192
|
-
args: [{ alias: 'max' }]
|
|
2193
|
-
}], step: [{
|
|
2303
|
+
}], emptyValue: [{
|
|
2304
|
+
type: Input
|
|
2305
|
+
}], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxValue: [{ 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 }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{
|
|
2194
2306
|
type: Input
|
|
2195
2307
|
}], minlength: [{
|
|
2196
2308
|
type: Input
|
|
@@ -2201,6 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2201
2313
|
let autocompleteSequence = 0;
|
|
2202
2314
|
class TdAutocompleteSelect {
|
|
2203
2315
|
cdr = inject(ChangeDetectorRef);
|
|
2316
|
+
formBridge = createTdFormControlBridge();
|
|
2204
2317
|
document = inject(DOCUMENT);
|
|
2205
2318
|
destroyRef = inject(DestroyRef);
|
|
2206
2319
|
scrollStrategies = inject(ScrollStrategyOptions);
|
|
@@ -2211,14 +2324,22 @@ class TdAutocompleteSelect {
|
|
|
2211
2324
|
placeholder = 'Escribe para buscar...';
|
|
2212
2325
|
options = [];
|
|
2213
2326
|
hint = '';
|
|
2214
|
-
|
|
2215
|
-
emptyText = 'No se encontraron resultados';
|
|
2216
|
-
clearable = true;
|
|
2217
|
-
dark = false;
|
|
2327
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2218
2328
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2329
|
+
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
2330
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2331
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
2219
2332
|
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2333
|
+
pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
2334
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
2335
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2220
2336
|
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2337
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2221
2338
|
touch = output();
|
|
2339
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2340
|
+
emptyText = 'No se encontraron resultados';
|
|
2341
|
+
clearable = true;
|
|
2342
|
+
dark = false;
|
|
2222
2343
|
scrollBehavior = 'reposition';
|
|
2223
2344
|
minimumCharacters = 0;
|
|
2224
2345
|
filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
|
|
@@ -2226,9 +2347,8 @@ class TdAutocompleteSelect {
|
|
|
2226
2347
|
selectionChange = new EventEmitter();
|
|
2227
2348
|
searchChange = new EventEmitter();
|
|
2228
2349
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2350
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2351
|
+
displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2232
2352
|
hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2233
2353
|
search = '';
|
|
2234
2354
|
open = false;
|
|
@@ -2247,11 +2367,9 @@ class TdAutocompleteSelect {
|
|
|
2247
2367
|
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
2248
2368
|
}
|
|
2249
2369
|
onTouched = () => {
|
|
2250
|
-
this.
|
|
2251
|
-
this.touch.emit();
|
|
2370
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
2252
2371
|
};
|
|
2253
2372
|
changed = () => undefined;
|
|
2254
|
-
onCvaTouched = () => undefined;
|
|
2255
2373
|
constructor() {
|
|
2256
2374
|
const scrollListener = (event) => {
|
|
2257
2375
|
const target = event.target;
|
|
@@ -2280,17 +2398,19 @@ class TdAutocompleteSelect {
|
|
|
2280
2398
|
this.changed = fn;
|
|
2281
2399
|
}
|
|
2282
2400
|
registerOnTouched(fn) {
|
|
2283
|
-
this.
|
|
2401
|
+
this.formBridge.registerOnTouched(fn);
|
|
2284
2402
|
}
|
|
2285
2403
|
setDisabledState(disabled) {
|
|
2286
|
-
this.
|
|
2287
|
-
|
|
2404
|
+
this.formBridge.setDisabledState(disabled);
|
|
2405
|
+
}
|
|
2406
|
+
focus(options) {
|
|
2407
|
+
this.searchInput?.nativeElement.focus(options);
|
|
2288
2408
|
}
|
|
2289
2409
|
compare(first, second) {
|
|
2290
2410
|
return this.compareWith(first, second);
|
|
2291
2411
|
}
|
|
2292
2412
|
openPanel() {
|
|
2293
|
-
if (this.isDisabled())
|
|
2413
|
+
if (this.isDisabled() || this.readonly())
|
|
2294
2414
|
return;
|
|
2295
2415
|
this.open = true;
|
|
2296
2416
|
this.activeIndex = this.firstEnabledIndex();
|
|
@@ -2300,8 +2420,7 @@ class TdAutocompleteSelect {
|
|
|
2300
2420
|
const selected = this.options.find((option) => this.compare(option.value, this.value()));
|
|
2301
2421
|
if (selected)
|
|
2302
2422
|
this.search = selected.label;
|
|
2303
|
-
this.
|
|
2304
|
-
this.touch.emit();
|
|
2423
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
2305
2424
|
}
|
|
2306
2425
|
handleInput(event) {
|
|
2307
2426
|
this.search = event.target.value;
|
|
@@ -2369,7 +2488,7 @@ class TdAutocompleteSelect {
|
|
|
2369
2488
|
return this.filteredOptions.findIndex((option) => !option.disabled);
|
|
2370
2489
|
}
|
|
2371
2490
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null },
|
|
2491
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2373
2492
|
{
|
|
2374
2493
|
provide: NG_VALUE_ACCESSOR,
|
|
2375
2494
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
@@ -2397,6 +2516,9 @@ class TdAutocompleteSelect {
|
|
|
2397
2516
|
[value]="search"
|
|
2398
2517
|
[placeholder]="placeholder"
|
|
2399
2518
|
[disabled]="isDisabled()"
|
|
2519
|
+
[readonly]="readonly()"
|
|
2520
|
+
[required]="required()"
|
|
2521
|
+
[attr.aria-invalid]="hasError()"
|
|
2400
2522
|
[attr.aria-expanded]="open"
|
|
2401
2523
|
[attr.aria-controls]="listId"
|
|
2402
2524
|
(focus)="openPanel()"
|
|
@@ -2498,6 +2620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2498
2620
|
[value]="search"
|
|
2499
2621
|
[placeholder]="placeholder"
|
|
2500
2622
|
[disabled]="isDisabled()"
|
|
2623
|
+
[readonly]="readonly()"
|
|
2624
|
+
[required]="required()"
|
|
2625
|
+
[attr.aria-invalid]="hasError()"
|
|
2501
2626
|
[attr.aria-expanded]="open"
|
|
2502
2627
|
[attr.aria-controls]="listId"
|
|
2503
2628
|
(focus)="openPanel()"
|
|
@@ -2579,7 +2704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2579
2704
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
2580
2705
|
multi: true,
|
|
2581
2706
|
},
|
|
2582
|
-
],
|
|
2707
|
+
], host: {
|
|
2708
|
+
'[hidden]': 'hidden()',
|
|
2709
|
+
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
2710
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2583
2711
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
2584
2712
|
type: ViewChild,
|
|
2585
2713
|
args: ['searchInput']
|
|
@@ -2594,15 +2722,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2594
2722
|
type: Input
|
|
2595
2723
|
}], hint: [{
|
|
2596
2724
|
type: Input
|
|
2597
|
-
}], error: [{
|
|
2598
|
-
type: Input
|
|
2599
|
-
}], emptyText: [{
|
|
2725
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyText: [{
|
|
2600
2726
|
type: Input
|
|
2601
2727
|
}], clearable: [{
|
|
2602
2728
|
type: Input
|
|
2603
2729
|
}], dark: [{
|
|
2604
2730
|
type: Input
|
|
2605
|
-
}],
|
|
2731
|
+
}], scrollBehavior: [{
|
|
2606
2732
|
type: Input
|
|
2607
2733
|
}], minimumCharacters: [{
|
|
2608
2734
|
type: Input
|
|
@@ -2619,30 +2745,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2619
2745
|
let selectSequence = 0;
|
|
2620
2746
|
class TdSelect {
|
|
2621
2747
|
cdr = inject(ChangeDetectorRef);
|
|
2748
|
+
formBridge = createTdFormControlBridge();
|
|
2622
2749
|
document = inject(DOCUMENT);
|
|
2623
2750
|
destroyRef = inject(DestroyRef);
|
|
2624
2751
|
scrollStrategies = inject(ScrollStrategyOptions);
|
|
2625
2752
|
generatedId = `td-select-${++selectSequence}`;
|
|
2626
2753
|
connectedOverlay;
|
|
2754
|
+
trigger;
|
|
2627
2755
|
label = 'Seleccionar';
|
|
2628
2756
|
placeholder = 'Selecciona una opción';
|
|
2629
2757
|
options = [];
|
|
2630
2758
|
hint = '';
|
|
2631
|
-
|
|
2632
|
-
emptyText = 'No hay opciones disponibles';
|
|
2633
|
-
clearable = false;
|
|
2634
|
-
dark = false;
|
|
2759
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2635
2760
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2761
|
+
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
2762
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2763
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
2636
2764
|
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2765
|
+
pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
2766
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
2767
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2637
2768
|
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2769
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2638
2770
|
touch = output();
|
|
2771
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2772
|
+
emptyText = 'No hay opciones disponibles';
|
|
2773
|
+
clearable = false;
|
|
2774
|
+
dark = false;
|
|
2639
2775
|
scrollBehavior = 'reposition';
|
|
2640
2776
|
compareWith = (first, second) => Object.is(first, second);
|
|
2641
2777
|
selectionChange = new EventEmitter();
|
|
2642
2778
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2779
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2780
|
+
displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2646
2781
|
hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2647
2782
|
open = false;
|
|
2648
2783
|
activeIndex = -1;
|
|
@@ -2657,7 +2792,6 @@ class TdSelect {
|
|
|
2657
2792
|
return this.options.find((option) => this.compare(option.value, this.value()));
|
|
2658
2793
|
}
|
|
2659
2794
|
onChange = () => undefined;
|
|
2660
|
-
onTouched = () => undefined;
|
|
2661
2795
|
constructor() {
|
|
2662
2796
|
const scrollListener = (event) => {
|
|
2663
2797
|
const target = event.target;
|
|
@@ -2684,17 +2818,19 @@ class TdSelect {
|
|
|
2684
2818
|
this.onChange = fn;
|
|
2685
2819
|
}
|
|
2686
2820
|
registerOnTouched(fn) {
|
|
2687
|
-
this.
|
|
2821
|
+
this.formBridge.registerOnTouched(fn);
|
|
2688
2822
|
}
|
|
2689
2823
|
setDisabledState(disabled) {
|
|
2690
|
-
this.
|
|
2691
|
-
|
|
2824
|
+
this.formBridge.setDisabledState(disabled);
|
|
2825
|
+
}
|
|
2826
|
+
focus(options) {
|
|
2827
|
+
this.trigger?.nativeElement.focus(options);
|
|
2692
2828
|
}
|
|
2693
2829
|
compare(first, second) {
|
|
2694
2830
|
return this.compareWith(first, second);
|
|
2695
2831
|
}
|
|
2696
2832
|
toggle() {
|
|
2697
|
-
if (this.isDisabled())
|
|
2833
|
+
if (this.isDisabled() || this.readonly())
|
|
2698
2834
|
return;
|
|
2699
2835
|
this.open ? this.close() : this.openPanel();
|
|
2700
2836
|
}
|
|
@@ -2702,8 +2838,7 @@ class TdSelect {
|
|
|
2702
2838
|
if (!this.open)
|
|
2703
2839
|
return;
|
|
2704
2840
|
this.open = false;
|
|
2705
|
-
this.
|
|
2706
|
-
this.touch.emit();
|
|
2841
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
2707
2842
|
}
|
|
2708
2843
|
select(option) {
|
|
2709
2844
|
if (option.disabled)
|
|
@@ -2768,13 +2903,13 @@ class TdSelect {
|
|
|
2768
2903
|
this.selectionChange.emit(value);
|
|
2769
2904
|
}
|
|
2770
2905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2771
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null },
|
|
2906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2772
2907
|
{
|
|
2773
2908
|
provide: NG_VALUE_ACCESSOR,
|
|
2774
2909
|
useExisting: forwardRef(() => TdSelect),
|
|
2775
2910
|
multi: true,
|
|
2776
2911
|
},
|
|
2777
|
-
], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
|
|
2912
|
+
], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: `
|
|
2778
2913
|
<div
|
|
2779
2914
|
cdkOverlayOrigin
|
|
2780
2915
|
#origin="cdkOverlayOrigin"
|
|
@@ -2786,10 +2921,14 @@ class TdSelect {
|
|
|
2786
2921
|
>
|
|
2787
2922
|
<label [id]="labelId">{{ label }}</label>
|
|
2788
2923
|
<div
|
|
2924
|
+
#trigger
|
|
2789
2925
|
class="td-select__trigger"
|
|
2790
2926
|
role="combobox"
|
|
2791
2927
|
[attr.tabindex]="isDisabled() ? -1 : 0"
|
|
2792
2928
|
[attr.aria-disabled]="isDisabled()"
|
|
2929
|
+
[attr.aria-readonly]="readonly()"
|
|
2930
|
+
[attr.aria-required]="required()"
|
|
2931
|
+
[attr.aria-invalid]="hasError()"
|
|
2793
2932
|
[attr.aria-labelledby]="labelId"
|
|
2794
2933
|
[attr.aria-expanded]="open"
|
|
2795
2934
|
[attr.aria-controls]="listId"
|
|
@@ -2891,10 +3030,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2891
3030
|
>
|
|
2892
3031
|
<label [id]="labelId">{{ label }}</label>
|
|
2893
3032
|
<div
|
|
3033
|
+
#trigger
|
|
2894
3034
|
class="td-select__trigger"
|
|
2895
3035
|
role="combobox"
|
|
2896
3036
|
[attr.tabindex]="isDisabled() ? -1 : 0"
|
|
2897
3037
|
[attr.aria-disabled]="isDisabled()"
|
|
3038
|
+
[attr.aria-readonly]="readonly()"
|
|
3039
|
+
[attr.aria-required]="required()"
|
|
3040
|
+
[attr.aria-invalid]="hasError()"
|
|
2898
3041
|
[attr.aria-labelledby]="labelId"
|
|
2899
3042
|
[attr.aria-expanded]="open"
|
|
2900
3043
|
[attr.aria-controls]="listId"
|
|
@@ -2986,10 +3129,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2986
3129
|
useExisting: forwardRef(() => TdSelect),
|
|
2987
3130
|
multi: true,
|
|
2988
3131
|
},
|
|
2989
|
-
],
|
|
3132
|
+
], host: {
|
|
3133
|
+
'[hidden]': 'hidden()',
|
|
3134
|
+
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3135
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2990
3136
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
2991
3137
|
type: ViewChild,
|
|
2992
3138
|
args: [CdkConnectedOverlay]
|
|
3139
|
+
}], trigger: [{
|
|
3140
|
+
type: ViewChild,
|
|
3141
|
+
args: ['trigger']
|
|
2993
3142
|
}], label: [{
|
|
2994
3143
|
type: Input
|
|
2995
3144
|
}], placeholder: [{
|
|
@@ -2998,15 +3147,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2998
3147
|
type: Input
|
|
2999
3148
|
}], hint: [{
|
|
3000
3149
|
type: Input
|
|
3001
|
-
}], error: [{
|
|
3002
|
-
type: Input
|
|
3003
|
-
}], emptyText: [{
|
|
3150
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyText: [{
|
|
3004
3151
|
type: Input
|
|
3005
3152
|
}], clearable: [{
|
|
3006
3153
|
type: Input
|
|
3007
3154
|
}], dark: [{
|
|
3008
3155
|
type: Input
|
|
3009
|
-
}],
|
|
3156
|
+
}], scrollBehavior: [{
|
|
3010
3157
|
type: Input
|
|
3011
3158
|
}], compareWith: [{
|
|
3012
3159
|
type: Input
|
|
@@ -3442,5 +3589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3442
3589
|
* Generated bundle index. Do not edit.
|
|
3443
3590
|
*/
|
|
3444
3591
|
|
|
3445
|
-
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi };
|
|
3592
|
+
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi, createTdFormControlBridge };
|
|
3446
3593
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|