@telcomdev/ui 0.1.8 → 0.1.10
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.
|
@@ -3377,6 +3377,7 @@ class TdAutocompleteSelect {
|
|
|
3377
3377
|
placeholder = 'Escribe para buscar...';
|
|
3378
3378
|
options = [];
|
|
3379
3379
|
hint = '';
|
|
3380
|
+
hideLabel = false;
|
|
3380
3381
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3381
3382
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3382
3383
|
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
@@ -3396,6 +3397,7 @@ class TdAutocompleteSelect {
|
|
|
3396
3397
|
dark = false;
|
|
3397
3398
|
scrollBehavior = 'reposition';
|
|
3398
3399
|
overflowText = 'marquee';
|
|
3400
|
+
appearance = 'outline';
|
|
3399
3401
|
minimumCharacters = 0;
|
|
3400
3402
|
filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
|
|
3401
3403
|
compareWith = (first, second) => Object.is(first, second);
|
|
@@ -3434,6 +3436,12 @@ class TdAutocompleteSelect {
|
|
|
3434
3436
|
get listId() {
|
|
3435
3437
|
return `${this.generatedId}-list`;
|
|
3436
3438
|
}
|
|
3439
|
+
get hasVisibleLabel() {
|
|
3440
|
+
return !this.hideLabel && !!this.label.trim();
|
|
3441
|
+
}
|
|
3442
|
+
get accessibleLabel() {
|
|
3443
|
+
return this.label.trim() || this.placeholder;
|
|
3444
|
+
}
|
|
3437
3445
|
get filteredOptions() {
|
|
3438
3446
|
const normalized = this.search.trim().toLocaleLowerCase();
|
|
3439
3447
|
if (normalized.length < this.minimumCharacters)
|
|
@@ -3441,7 +3449,8 @@ class TdAutocompleteSelect {
|
|
|
3441
3449
|
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
3442
3450
|
}
|
|
3443
3451
|
get labelFloating() {
|
|
3444
|
-
return
|
|
3452
|
+
return (this.hasVisibleLabel &&
|
|
3453
|
+
(this.focused() || this.open || !!this.search.trim() || this.value() !== null));
|
|
3445
3454
|
}
|
|
3446
3455
|
changed = () => undefined;
|
|
3447
3456
|
constructor() {
|
|
@@ -3657,7 +3666,7 @@ class TdAutocompleteSelect {
|
|
|
3657
3666
|
});
|
|
3658
3667
|
}
|
|
3659
3668
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3660
|
-
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 }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", 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 }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", 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: [
|
|
3669
|
+
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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", 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 }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", 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 }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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: [
|
|
3661
3670
|
{
|
|
3662
3671
|
provide: NG_VALUE_ACCESSOR,
|
|
3663
3672
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
@@ -3673,8 +3682,13 @@ class TdAutocompleteSelect {
|
|
|
3673
3682
|
[class.td-select--disabled]="isDisabled()"
|
|
3674
3683
|
[class.td-select--dark]="dark"
|
|
3675
3684
|
[class.td-select--floating]="labelFloating"
|
|
3685
|
+
[class.td-select--filled]="appearance === 'filled'"
|
|
3686
|
+
[class.td-select--standard]="appearance === 'standard'"
|
|
3687
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
3676
3688
|
>
|
|
3677
|
-
|
|
3689
|
+
@if (hasVisibleLabel) {
|
|
3690
|
+
<label [for]="inputId">{{ label }}</label>
|
|
3691
|
+
}
|
|
3678
3692
|
<div class="td-select__trigger">
|
|
3679
3693
|
<td-icon class="td-select__leading" nombre="search" />
|
|
3680
3694
|
<input
|
|
@@ -3684,11 +3698,12 @@ class TdAutocompleteSelect {
|
|
|
3684
3698
|
autocomplete="off"
|
|
3685
3699
|
role="combobox"
|
|
3686
3700
|
[value]="search"
|
|
3687
|
-
[placeholder]="labelFloating ? placeholder : ''"
|
|
3701
|
+
[placeholder]="labelFloating || !hasVisibleLabel ? placeholder : ''"
|
|
3688
3702
|
[disabled]="isDisabled()"
|
|
3689
3703
|
[readonly]="readonly()"
|
|
3690
3704
|
[required]="required()"
|
|
3691
3705
|
[attr.aria-invalid]="hasError()"
|
|
3706
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
3692
3707
|
[attr.aria-expanded]="open"
|
|
3693
3708
|
[attr.aria-controls]="listId"
|
|
3694
3709
|
(focus)="handleFocus()"
|
|
@@ -3768,7 +3783,7 @@ class TdAutocompleteSelect {
|
|
|
3768
3783
|
}
|
|
3769
3784
|
</div>
|
|
3770
3785
|
</ng-template>
|
|
3771
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3786
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3772
3787
|
}
|
|
3773
3788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
3774
3789
|
type: Component,
|
|
@@ -3782,8 +3797,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3782
3797
|
[class.td-select--disabled]="isDisabled()"
|
|
3783
3798
|
[class.td-select--dark]="dark"
|
|
3784
3799
|
[class.td-select--floating]="labelFloating"
|
|
3800
|
+
[class.td-select--filled]="appearance === 'filled'"
|
|
3801
|
+
[class.td-select--standard]="appearance === 'standard'"
|
|
3802
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
3785
3803
|
>
|
|
3786
|
-
|
|
3804
|
+
@if (hasVisibleLabel) {
|
|
3805
|
+
<label [for]="inputId">{{ label }}</label>
|
|
3806
|
+
}
|
|
3787
3807
|
<div class="td-select__trigger">
|
|
3788
3808
|
<td-icon class="td-select__leading" nombre="search" />
|
|
3789
3809
|
<input
|
|
@@ -3793,11 +3813,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3793
3813
|
autocomplete="off"
|
|
3794
3814
|
role="combobox"
|
|
3795
3815
|
[value]="search"
|
|
3796
|
-
[placeholder]="labelFloating ? placeholder : ''"
|
|
3816
|
+
[placeholder]="labelFloating || !hasVisibleLabel ? placeholder : ''"
|
|
3797
3817
|
[disabled]="isDisabled()"
|
|
3798
3818
|
[readonly]="readonly()"
|
|
3799
3819
|
[required]="required()"
|
|
3800
3820
|
[attr.aria-invalid]="hasError()"
|
|
3821
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
3801
3822
|
[attr.aria-expanded]="open"
|
|
3802
3823
|
[attr.aria-controls]="listId"
|
|
3803
3824
|
(focus)="handleFocus()"
|
|
@@ -3886,7 +3907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3886
3907
|
], host: {
|
|
3887
3908
|
'[hidden]': 'hidden()',
|
|
3888
3909
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3889
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
3910
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
3890
3911
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
3891
3912
|
type: ViewChild,
|
|
3892
3913
|
args: ['searchInput']
|
|
@@ -3904,6 +3925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3904
3925
|
type: Input
|
|
3905
3926
|
}], hint: [{
|
|
3906
3927
|
type: Input
|
|
3928
|
+
}], hideLabel: [{
|
|
3929
|
+
type: Input
|
|
3907
3930
|
}], 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 }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
|
|
3908
3931
|
type: Input
|
|
3909
3932
|
}], clearable: [{
|
|
@@ -3914,6 +3937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3914
3937
|
type: Input
|
|
3915
3938
|
}], overflowText: [{
|
|
3916
3939
|
type: Input
|
|
3940
|
+
}], appearance: [{
|
|
3941
|
+
type: Input
|
|
3917
3942
|
}], minimumCharacters: [{
|
|
3918
3943
|
type: Input
|
|
3919
3944
|
}], filterWith: [{
|
|
@@ -3941,6 +3966,7 @@ class TdSelect {
|
|
|
3941
3966
|
placeholder = 'Selecciona una opción';
|
|
3942
3967
|
options = [];
|
|
3943
3968
|
hint = '';
|
|
3969
|
+
hideLabel = false;
|
|
3944
3970
|
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3945
3971
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3946
3972
|
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
@@ -3960,6 +3986,7 @@ class TdSelect {
|
|
|
3960
3986
|
dark = false;
|
|
3961
3987
|
scrollBehavior = 'reposition';
|
|
3962
3988
|
overflowText = 'marquee';
|
|
3989
|
+
appearance = 'outline';
|
|
3963
3990
|
compareWith = (first, second) => Object.is(first, second);
|
|
3964
3991
|
selectionChange = new EventEmitter();
|
|
3965
3992
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
@@ -3990,6 +4017,12 @@ class TdSelect {
|
|
|
3990
4017
|
get labelId() {
|
|
3991
4018
|
return `${this.generatedId}-label`;
|
|
3992
4019
|
}
|
|
4020
|
+
get hasVisibleLabel() {
|
|
4021
|
+
return !this.hideLabel && !!this.label.trim();
|
|
4022
|
+
}
|
|
4023
|
+
get accessibleLabel() {
|
|
4024
|
+
return this.label.trim() || this.placeholder;
|
|
4025
|
+
}
|
|
3993
4026
|
get listId() {
|
|
3994
4027
|
return `${this.generatedId}-list`;
|
|
3995
4028
|
}
|
|
@@ -4189,7 +4222,7 @@ class TdSelect {
|
|
|
4189
4222
|
});
|
|
4190
4223
|
}
|
|
4191
4224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4192
|
-
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 }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", 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 }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", 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: [
|
|
4225
|
+
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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", 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 }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", 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 }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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: [
|
|
4193
4226
|
{
|
|
4194
4227
|
provide: NG_VALUE_ACCESSOR,
|
|
4195
4228
|
useExisting: forwardRef(() => TdSelect),
|
|
@@ -4204,8 +4237,13 @@ class TdSelect {
|
|
|
4204
4237
|
[class.td-select--error]="hasError()"
|
|
4205
4238
|
[class.td-select--disabled]="isDisabled()"
|
|
4206
4239
|
[class.td-select--dark]="dark"
|
|
4240
|
+
[class.td-select--filled]="appearance === 'filled'"
|
|
4241
|
+
[class.td-select--standard]="appearance === 'standard'"
|
|
4242
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
4207
4243
|
>
|
|
4208
|
-
|
|
4244
|
+
@if (hasVisibleLabel) {
|
|
4245
|
+
<label [id]="labelId">{{ label }}</label>
|
|
4246
|
+
}
|
|
4209
4247
|
<div
|
|
4210
4248
|
#trigger
|
|
4211
4249
|
class="td-select__trigger"
|
|
@@ -4215,7 +4253,8 @@ class TdSelect {
|
|
|
4215
4253
|
[attr.aria-readonly]="readonly()"
|
|
4216
4254
|
[attr.aria-required]="required()"
|
|
4217
4255
|
[attr.aria-invalid]="hasError()"
|
|
4218
|
-
[attr.aria-labelledby]="labelId"
|
|
4256
|
+
[attr.aria-labelledby]="hasVisibleLabel ? labelId : null"
|
|
4257
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
4219
4258
|
[attr.aria-expanded]="open"
|
|
4220
4259
|
[attr.aria-controls]="listId"
|
|
4221
4260
|
(click)="toggle()"
|
|
@@ -4304,7 +4343,7 @@ class TdSelect {
|
|
|
4304
4343
|
}
|
|
4305
4344
|
</div>
|
|
4306
4345
|
</ng-template>
|
|
4307
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4346
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4308
4347
|
}
|
|
4309
4348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, decorators: [{
|
|
4310
4349
|
type: Component,
|
|
@@ -4317,8 +4356,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4317
4356
|
[class.td-select--error]="hasError()"
|
|
4318
4357
|
[class.td-select--disabled]="isDisabled()"
|
|
4319
4358
|
[class.td-select--dark]="dark"
|
|
4359
|
+
[class.td-select--filled]="appearance === 'filled'"
|
|
4360
|
+
[class.td-select--standard]="appearance === 'standard'"
|
|
4361
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
4320
4362
|
>
|
|
4321
|
-
|
|
4363
|
+
@if (hasVisibleLabel) {
|
|
4364
|
+
<label [id]="labelId">{{ label }}</label>
|
|
4365
|
+
}
|
|
4322
4366
|
<div
|
|
4323
4367
|
#trigger
|
|
4324
4368
|
class="td-select__trigger"
|
|
@@ -4328,7 +4372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4328
4372
|
[attr.aria-readonly]="readonly()"
|
|
4329
4373
|
[attr.aria-required]="required()"
|
|
4330
4374
|
[attr.aria-invalid]="hasError()"
|
|
4331
|
-
[attr.aria-labelledby]="labelId"
|
|
4375
|
+
[attr.aria-labelledby]="hasVisibleLabel ? labelId : null"
|
|
4376
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
4332
4377
|
[attr.aria-expanded]="open"
|
|
4333
4378
|
[attr.aria-controls]="listId"
|
|
4334
4379
|
(click)="toggle()"
|
|
@@ -4426,7 +4471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4426
4471
|
], host: {
|
|
4427
4472
|
'[hidden]': 'hidden()',
|
|
4428
4473
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
4429
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
4474
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.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:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.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:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-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:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #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:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #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:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
4430
4475
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
4431
4476
|
type: ViewChild,
|
|
4432
4477
|
args: [CdkConnectedOverlay]
|
|
@@ -4444,6 +4489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4444
4489
|
type: Input
|
|
4445
4490
|
}], hint: [{
|
|
4446
4491
|
type: Input
|
|
4492
|
+
}], hideLabel: [{
|
|
4493
|
+
type: Input
|
|
4447
4494
|
}], 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 }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
|
|
4448
4495
|
type: Input
|
|
4449
4496
|
}], clearable: [{
|
|
@@ -4454,6 +4501,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4454
4501
|
type: Input
|
|
4455
4502
|
}], overflowText: [{
|
|
4456
4503
|
type: Input
|
|
4504
|
+
}], appearance: [{
|
|
4505
|
+
type: Input
|
|
4457
4506
|
}], compareWith: [{
|
|
4458
4507
|
type: Input
|
|
4459
4508
|
}], selectionChange: [{
|