@weeehaoooz/talos-ui 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/fesm2022/{weeehaoooz-talos-ui-button-button-group.mjs → weeehaoooz-talos-ui-button.mjs} +115 -18
- package/fesm2022/weeehaoooz-talos-ui-button.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-data-display.mjs +3110 -0
- package/fesm2022/weeehaoooz-talos-ui-data-display.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs +2414 -0
- package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs +1039 -0
- package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-feedback.mjs +2885 -0
- package/fesm2022/weeehaoooz-talos-ui-feedback.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-form.mjs +10799 -0
- package/fesm2022/weeehaoooz-talos-ui-form.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs +1320 -11
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs +119 -72
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui.mjs +22190 -15213
- package/fesm2022/weeehaoooz-talos-ui.mjs.map +1 -1
- package/package.json +20 -135
- package/styles/_breadcrumb.scss +16 -0
- package/styles/_button-group.scss +156 -7
- package/styles/_buttons.scss +156 -8
- package/styles/_dropdown.scss +438 -0
- package/styles/_form-controls.scss +13 -0
- package/styles/_progress-bar.scss +43 -0
- package/styles/_skeleton.scss +176 -0
- package/styles/_spinner.scss +58 -0
- package/styles/_variables.scss +37 -0
- package/styles/index.scss +6 -1
- package/types/weeehaoooz-talos-ui-button.d.ts +92 -0
- package/types/weeehaoooz-talos-ui-button.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-data-display.d.ts +1018 -0
- package/types/weeehaoooz-talos-ui-data-display.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-data-viz.d.ts +839 -0
- package/types/weeehaoooz-talos-ui-data-viz.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-dropdown.d.ts +187 -0
- package/types/weeehaoooz-talos-ui-dropdown.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-feedback.d.ts +1495 -0
- package/types/weeehaoooz-talos-ui-feedback.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-form.d.ts +2639 -0
- package/types/weeehaoooz-talos-ui-form.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-layout.d.ts +851 -3
- package/types/weeehaoooz-talos-ui-layout.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui-nav.d.ts +36 -10
- package/types/weeehaoooz-talos-ui-nav.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui.d.ts +6949 -4137
- package/types/weeehaoooz-talos-ui.d.ts.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs +0 -93
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs +0 -233
- package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs +0 -361
- package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs +0 -312
- package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs +0 -235
- package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs +0 -462
- package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs +0 -805
- package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs +0 -267
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs +0 -351
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs +0 -566
- package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs +0 -534
- package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs +0 -446
- package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs +0 -376
- package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs +0 -147
- package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs +0 -242
- package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs +0 -514
- package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs +0 -548
- package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs +0 -692
- package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs +0 -761
- package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs +0 -896
- package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs +0 -872
- package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs +0 -119
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs +0 -135
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs +0 -666
- package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs +0 -147
- package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-input.mjs +0 -33
- package/fesm2022/weeehaoooz-talos-ui-form-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs +0 -455
- package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs +0 -379
- package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs +0 -297
- package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs +0 -661
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs +0 -346
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs +0 -896
- package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs +0 -252
- package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs +0 -916
- package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs.map +0 -1
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts +0 -59
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-button-button.d.ts +0 -38
- package/types/weeehaoooz-talos-ui-button-button.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-badge.d.ts +0 -119
- package/types/weeehaoooz-talos-ui-data-display-badge.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts +0 -135
- package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts +0 -144
- package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts +0 -83
- package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts +0 -255
- package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts +0 -204
- package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts +0 -101
- package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts +0 -138
- package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts +0 -161
- package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-alert.d.ts +0 -212
- package/types/weeehaoooz-talos-ui-feedback-alert.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts +0 -259
- package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts +0 -147
- package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts +0 -32
- package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-affix.d.ts +0 -88
- package/types/weeehaoooz-talos-ui-form-affix.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts +0 -113
- package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-checkbox.d.ts +0 -165
- package/types/weeehaoooz-talos-ui-form-checkbox.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-chips.d.ts +0 -152
- package/types/weeehaoooz-talos-ui-form-chips.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-color-picker.d.ts +0 -144
- package/types/weeehaoooz-talos-ui-form-color-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-picker.d.ts +0 -138
- package/types/weeehaoooz-talos-ui-form-date-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts +0 -148
- package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts +0 -44
- package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts +0 -48
- package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts +0 -227
- package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-form-field.d.ts +0 -42
- package/types/weeehaoooz-talos-ui-form-form-field.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-input.d.ts +0 -15
- package/types/weeehaoooz-talos-ui-form-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-otp.d.ts +0 -111
- package/types/weeehaoooz-talos-ui-form-otp.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-password-input.d.ts +0 -145
- package/types/weeehaoooz-talos-ui-form-password-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-radio.d.ts +0 -84
- package/types/weeehaoooz-talos-ui-form-radio.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-range-input.d.ts +0 -181
- package/types/weeehaoooz-talos-ui-form-range-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-rating.d.ts +0 -110
- package/types/weeehaoooz-talos-ui-form-rating.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-select-input.d.ts +0 -195
- package/types/weeehaoooz-talos-ui-form-select-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts +0 -79
- package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts +0 -192
- package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts.map +0 -1
|
@@ -1,896 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, input, output, signal, Component, contentChildren, computed, effect, forwardRef, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
-
export * from '@weeehaoooz/talos-ui/form/affix';
|
|
5
|
-
|
|
6
|
-
class OptionComponent {
|
|
7
|
-
elementRef = inject((ElementRef));
|
|
8
|
-
value = input(null, /* @ts-ignore */
|
|
9
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10
|
-
label = input(undefined, /* @ts-ignore */
|
|
11
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
12
|
-
disabled = input(false, /* @ts-ignore */
|
|
13
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
14
|
-
selected = output();
|
|
15
|
-
isSelected = signal(false, /* @ts-ignore */
|
|
16
|
-
...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
17
|
-
isActive = signal(false, /* @ts-ignore */
|
|
18
|
-
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
19
|
-
hidden = signal(false, /* @ts-ignore */
|
|
20
|
-
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
21
|
-
displayText() {
|
|
22
|
-
const customLabel = this.label();
|
|
23
|
-
if (customLabel !== undefined && customLabel !== null && customLabel !== '') {
|
|
24
|
-
return customLabel;
|
|
25
|
-
}
|
|
26
|
-
const nativeText = this.elementRef.nativeElement.querySelector('.option-label-text')?.textContent?.trim()
|
|
27
|
-
?? this.elementRef.nativeElement.textContent?.trim();
|
|
28
|
-
if (nativeText) {
|
|
29
|
-
return nativeText;
|
|
30
|
-
}
|
|
31
|
-
const val = this.value();
|
|
32
|
-
return val !== null && val !== undefined ? String(val) : '';
|
|
33
|
-
}
|
|
34
|
-
onClick(event) {
|
|
35
|
-
event.stopPropagation();
|
|
36
|
-
if (this.disabled() || this.hidden()) {
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
this.selected.emit(this);
|
|
40
|
-
}
|
|
41
|
-
scrollIntoViewIfNeeded() {
|
|
42
|
-
if (typeof this.elementRef.nativeElement.scrollIntoView === 'function') {
|
|
43
|
-
this.elementRef.nativeElement.scrollIntoView({
|
|
44
|
-
block: 'nearest',
|
|
45
|
-
behavior: 'smooth'
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: OptionComponent, isStandalone: true, selector: "talos-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1", "class.talos-option": "true", "class.app-option": "true", "class.is-selected": "isSelected()", "class.is-active": "isActive()", "class.is-disabled": "disabled()", "class.is-hidden": "hidden()" } }, ngImport: i0, template: "<span class=\"option-label-text\">\n <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] });
|
|
51
|
-
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, decorators: [{
|
|
53
|
-
type: Component,
|
|
54
|
-
args: [{ selector: 'talos-option', host: {
|
|
55
|
-
'role': 'option',
|
|
56
|
-
'[attr.aria-selected]': 'isSelected()',
|
|
57
|
-
'[attr.aria-disabled]': 'disabled()',
|
|
58
|
-
'[attr.tabindex]': '-1',
|
|
59
|
-
'[class.talos-option]': 'true',
|
|
60
|
-
'[class.app-option]': 'true',
|
|
61
|
-
'[class.is-selected]': 'isSelected()',
|
|
62
|
-
'[class.is-active]': 'isActive()',
|
|
63
|
-
'[class.is-disabled]': 'disabled()',
|
|
64
|
-
'[class.is-hidden]': 'hidden()',
|
|
65
|
-
'(click)': 'onClick($event)'
|
|
66
|
-
}, template: "<span class=\"option-label-text\">\n <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] }]
|
|
67
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
68
|
-
|
|
69
|
-
class OptionGroupComponent {
|
|
70
|
-
label = input.required(/* @ts-ignore */
|
|
71
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
72
|
-
disabled = input(false, /* @ts-ignore */
|
|
73
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
74
|
-
options = contentChildren(OptionComponent, /* @ts-ignore */
|
|
75
|
-
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
76
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: OptionGroupComponent, isStandalone: true, selector: "talos-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()", "class.talos-option-group": "true", "class.app-option-group": "true", "class.is-disabled": "disabled()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n {{ label() }}\n</div>\n<div class=\"option-group-content\">\n <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] });
|
|
78
|
-
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, decorators: [{
|
|
80
|
-
type: Component,
|
|
81
|
-
args: [{ selector: 'talos-option-group', host: {
|
|
82
|
-
'role': 'group',
|
|
83
|
-
'[attr.aria-label]': 'label()',
|
|
84
|
-
'[class.talos-option-group]': 'true',
|
|
85
|
-
'[class.app-option-group]': 'true',
|
|
86
|
-
'[class.is-disabled]': 'disabled()'
|
|
87
|
-
}, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n {{ label() }}\n</div>\n<div class=\"option-group-content\">\n <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] }]
|
|
88
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
|
|
89
|
-
|
|
90
|
-
let uniqueIdCounter = 0;
|
|
91
|
-
class SelectInputComponent {
|
|
92
|
-
elementRef = inject((ElementRef));
|
|
93
|
-
// Signal Inputs
|
|
94
|
-
placeholder = input('Select an option', /* @ts-ignore */
|
|
95
|
-
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
96
|
-
label = input('', /* @ts-ignore */
|
|
97
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
98
|
-
floatingLabel = input(false, /* @ts-ignore */
|
|
99
|
-
...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
|
|
100
|
-
floating = input(false, /* @ts-ignore */
|
|
101
|
-
...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
|
|
102
|
-
required = input(false, /* @ts-ignore */
|
|
103
|
-
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
104
|
-
searchable = input(false, /* @ts-ignore */
|
|
105
|
-
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
106
|
-
searchPlaceholder = input('Search options...', /* @ts-ignore */
|
|
107
|
-
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
108
|
-
disabled = input(false, /* @ts-ignore */
|
|
109
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
110
|
-
clearable = input(false, /* @ts-ignore */
|
|
111
|
-
...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
112
|
-
multiple = input(false, /* @ts-ignore */
|
|
113
|
-
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
114
|
-
size = input('sm', /* @ts-ignore */
|
|
115
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
116
|
-
// Signal Outputs
|
|
117
|
-
selectionChange = output();
|
|
118
|
-
opened = output();
|
|
119
|
-
closed = output();
|
|
120
|
-
searchChange = output();
|
|
121
|
-
// Content Queries
|
|
122
|
-
options = contentChildren(OptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
|
|
123
|
-
optionGroups = contentChildren(OptionGroupComponent, /* @ts-ignore */
|
|
124
|
-
...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
|
|
125
|
-
// View Children
|
|
126
|
-
searchInputEl;
|
|
127
|
-
triggerEl;
|
|
128
|
-
// Component ID for ARIA attributes
|
|
129
|
-
componentId = `talos-select-${uniqueIdCounter++}`;
|
|
130
|
-
listboxId = `${this.componentId}-listbox`;
|
|
131
|
-
// Internal Reactive State
|
|
132
|
-
value = signal(null, /* @ts-ignore */
|
|
133
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
134
|
-
isOpen = signal(false, /* @ts-ignore */
|
|
135
|
-
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
136
|
-
searchValue = signal('', /* @ts-ignore */
|
|
137
|
-
...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
|
|
138
|
-
focusedIndex = signal(-1, /* @ts-ignore */
|
|
139
|
-
...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
140
|
-
isDisabled = signal(false, /* @ts-ignore */
|
|
141
|
-
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
142
|
-
isTouched = signal(false, /* @ts-ignore */
|
|
143
|
-
...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
|
|
144
|
-
hasPrefix = signal(false, /* @ts-ignore */
|
|
145
|
-
...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
146
|
-
hasSuffix = signal(false, /* @ts-ignore */
|
|
147
|
-
...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
148
|
-
// Computed state
|
|
149
|
-
isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
|
|
150
|
-
...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
|
|
151
|
-
isFloated = computed(() => {
|
|
152
|
-
if (!this.isFloatingMode())
|
|
153
|
-
return false;
|
|
154
|
-
return this.isOpen() || this.selectedOption() !== null || (this.searchable() && !!this.searchValue());
|
|
155
|
-
}, /* @ts-ignore */
|
|
156
|
-
...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
|
|
157
|
-
effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
|
|
158
|
-
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
159
|
-
selectedOption = computed(() => {
|
|
160
|
-
const currentVal = this.value();
|
|
161
|
-
if (currentVal === null || currentVal === undefined) {
|
|
162
|
-
return null;
|
|
163
|
-
}
|
|
164
|
-
return this.options().find((opt) => opt.value() === currentVal) ?? null;
|
|
165
|
-
}, /* @ts-ignore */
|
|
166
|
-
...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
167
|
-
displayLabel = computed(() => {
|
|
168
|
-
const selected = this.selectedOption();
|
|
169
|
-
return selected ? selected.displayText() : '';
|
|
170
|
-
}, /* @ts-ignore */
|
|
171
|
-
...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
172
|
-
visibleOptions = computed(() => {
|
|
173
|
-
return this.options().filter((opt) => !opt.hidden() && !opt.disabled());
|
|
174
|
-
}, /* @ts-ignore */
|
|
175
|
-
...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
|
|
176
|
-
// ControlValueAccessor Callbacks
|
|
177
|
-
onChange = () => { };
|
|
178
|
-
onTouched = () => { };
|
|
179
|
-
constructor() {
|
|
180
|
-
// Sync options' selected state when value or options list updates
|
|
181
|
-
effect(() => {
|
|
182
|
-
const opts = this.options();
|
|
183
|
-
const currentVal = this.value();
|
|
184
|
-
for (const opt of opts) {
|
|
185
|
-
opt.isSelected.set(opt.value() === currentVal);
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
// Subscribe to option click events
|
|
189
|
-
effect((onCleanup) => {
|
|
190
|
-
const opts = this.options();
|
|
191
|
-
const subs = opts.map((opt) => opt.selected.subscribe((selectedOpt) => {
|
|
192
|
-
this.selectOption(selectedOpt);
|
|
193
|
-
}));
|
|
194
|
-
onCleanup(() => {
|
|
195
|
-
subs.forEach((sub) => sub.unsubscribe());
|
|
196
|
-
});
|
|
197
|
-
});
|
|
198
|
-
// Update active highlight when focusedIndex or options change
|
|
199
|
-
effect(() => {
|
|
200
|
-
const visibleOpts = this.visibleOptions();
|
|
201
|
-
const index = this.focusedIndex();
|
|
202
|
-
this.options().forEach((opt) => {
|
|
203
|
-
const isActive = index >= 0 && visibleOpts[index] === opt;
|
|
204
|
-
opt.isActive.set(isActive);
|
|
205
|
-
if (isActive) {
|
|
206
|
-
opt.scrollIntoViewIfNeeded();
|
|
207
|
-
}
|
|
208
|
-
});
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
// --- ControlValueAccessor Interface ---
|
|
212
|
-
writeValue(val) {
|
|
213
|
-
this.value.set(val);
|
|
214
|
-
}
|
|
215
|
-
registerOnChange(fn) {
|
|
216
|
-
this.onChange = fn;
|
|
217
|
-
}
|
|
218
|
-
registerOnTouched(fn) {
|
|
219
|
-
this.onTouched = fn;
|
|
220
|
-
}
|
|
221
|
-
setDisabledState(isDisabled) {
|
|
222
|
-
this.isDisabled.set(isDisabled);
|
|
223
|
-
}
|
|
224
|
-
// --- Open / Close Controls ---
|
|
225
|
-
toggleOpen() {
|
|
226
|
-
if (this.effectiveDisabled())
|
|
227
|
-
return;
|
|
228
|
-
if (this.isOpen()) {
|
|
229
|
-
this.close();
|
|
230
|
-
}
|
|
231
|
-
else {
|
|
232
|
-
this.open();
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
open() {
|
|
236
|
-
if (this.effectiveDisabled() || this.isOpen())
|
|
237
|
-
return;
|
|
238
|
-
this.isOpen.set(true);
|
|
239
|
-
this.opened.emit();
|
|
240
|
-
// Set initial keyboard focus index to selected option or first option
|
|
241
|
-
const visibleOpts = this.visibleOptions();
|
|
242
|
-
const selected = this.selectedOption();
|
|
243
|
-
const selectedIdx = selected ? visibleOpts.indexOf(selected) : -1;
|
|
244
|
-
this.focusedIndex.set(selectedIdx >= 0 ? selectedIdx : visibleOpts.length > 0 ? 0 : -1);
|
|
245
|
-
if (this.searchable()) {
|
|
246
|
-
setTimeout(() => {
|
|
247
|
-
this.searchInputEl?.nativeElement.focus();
|
|
248
|
-
}, 50);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
close() {
|
|
252
|
-
if (!this.isOpen())
|
|
253
|
-
return;
|
|
254
|
-
this.isOpen.set(false);
|
|
255
|
-
this.focusedIndex.set(-1);
|
|
256
|
-
this.clearSearch();
|
|
257
|
-
this.markAsTouched();
|
|
258
|
-
this.closed.emit();
|
|
259
|
-
}
|
|
260
|
-
// --- Selection Logic ---
|
|
261
|
-
selectOption(option) {
|
|
262
|
-
const newValue = option ? option.value() : null;
|
|
263
|
-
this.value.set(newValue);
|
|
264
|
-
this.onChange(newValue);
|
|
265
|
-
this.selectionChange.emit(newValue);
|
|
266
|
-
this.close();
|
|
267
|
-
}
|
|
268
|
-
onClear(event) {
|
|
269
|
-
event.stopPropagation();
|
|
270
|
-
if (this.effectiveDisabled())
|
|
271
|
-
return;
|
|
272
|
-
this.selectOption(null);
|
|
273
|
-
}
|
|
274
|
-
markAsTouched() {
|
|
275
|
-
if (!this.isTouched()) {
|
|
276
|
-
this.isTouched.set(true);
|
|
277
|
-
this.onTouched();
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
// --- Search / Autocomplete Logic ---
|
|
281
|
-
onSearchInput(event) {
|
|
282
|
-
const query = event.target.value;
|
|
283
|
-
this.searchValue.set(query);
|
|
284
|
-
this.searchChange.emit(query);
|
|
285
|
-
this.filterOptions(query);
|
|
286
|
-
}
|
|
287
|
-
clearSearch() {
|
|
288
|
-
if (this.searchValue()) {
|
|
289
|
-
this.searchValue.set('');
|
|
290
|
-
this.searchChange.emit('');
|
|
291
|
-
this.filterOptions('');
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
filterOptions(query) {
|
|
295
|
-
const term = query.toLowerCase().trim();
|
|
296
|
-
for (const opt of this.options()) {
|
|
297
|
-
if (!term) {
|
|
298
|
-
opt.hidden.set(false);
|
|
299
|
-
}
|
|
300
|
-
else {
|
|
301
|
-
const matches = opt.displayText().toLowerCase().includes(term);
|
|
302
|
-
opt.hidden.set(!matches);
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
const visibleOpts = this.visibleOptions();
|
|
306
|
-
this.focusedIndex.set(visibleOpts.length > 0 ? 0 : -1);
|
|
307
|
-
}
|
|
308
|
-
// --- Keyboard & Document Click Event Handlers ---
|
|
309
|
-
onKeyDown(event) {
|
|
310
|
-
if (this.effectiveDisabled())
|
|
311
|
-
return;
|
|
312
|
-
const visibleOpts = this.visibleOptions();
|
|
313
|
-
const count = visibleOpts.length;
|
|
314
|
-
const currentIdx = this.focusedIndex();
|
|
315
|
-
switch (event.key) {
|
|
316
|
-
case 'ArrowDown':
|
|
317
|
-
event.preventDefault();
|
|
318
|
-
if (!this.isOpen()) {
|
|
319
|
-
this.open();
|
|
320
|
-
}
|
|
321
|
-
else if (count > 0) {
|
|
322
|
-
const nextIdx = (currentIdx + 1) % count;
|
|
323
|
-
this.focusedIndex.set(nextIdx);
|
|
324
|
-
}
|
|
325
|
-
break;
|
|
326
|
-
case 'ArrowUp':
|
|
327
|
-
event.preventDefault();
|
|
328
|
-
if (!this.isOpen()) {
|
|
329
|
-
this.open();
|
|
330
|
-
}
|
|
331
|
-
else if (count > 0) {
|
|
332
|
-
const prevIdx = (currentIdx - 1 + count) % count;
|
|
333
|
-
this.focusedIndex.set(prevIdx);
|
|
334
|
-
}
|
|
335
|
-
break;
|
|
336
|
-
case 'Enter':
|
|
337
|
-
case ' ':
|
|
338
|
-
if (event.key === ' ' && this.searchable() && this.isOpen()) {
|
|
339
|
-
// Allow space key inside search input
|
|
340
|
-
return;
|
|
341
|
-
}
|
|
342
|
-
event.preventDefault();
|
|
343
|
-
if (!this.isOpen()) {
|
|
344
|
-
this.open();
|
|
345
|
-
}
|
|
346
|
-
else if (currentIdx >= 0 && currentIdx < count) {
|
|
347
|
-
this.selectOption(visibleOpts[currentIdx]);
|
|
348
|
-
}
|
|
349
|
-
break;
|
|
350
|
-
case 'Escape':
|
|
351
|
-
if (this.isOpen()) {
|
|
352
|
-
event.preventDefault();
|
|
353
|
-
this.close();
|
|
354
|
-
this.triggerEl?.nativeElement.focus();
|
|
355
|
-
}
|
|
356
|
-
break;
|
|
357
|
-
case 'Home':
|
|
358
|
-
if (this.isOpen() && count > 0) {
|
|
359
|
-
event.preventDefault();
|
|
360
|
-
this.focusedIndex.set(0);
|
|
361
|
-
}
|
|
362
|
-
break;
|
|
363
|
-
case 'End':
|
|
364
|
-
if (this.isOpen() && count > 0) {
|
|
365
|
-
event.preventDefault();
|
|
366
|
-
this.focusedIndex.set(count - 1);
|
|
367
|
-
}
|
|
368
|
-
break;
|
|
369
|
-
case 'Tab':
|
|
370
|
-
if (this.isOpen()) {
|
|
371
|
-
this.close();
|
|
372
|
-
}
|
|
373
|
-
break;
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
ngAfterContentChecked() {
|
|
377
|
-
this.checkAffixes();
|
|
378
|
-
}
|
|
379
|
-
checkAffixes() {
|
|
380
|
-
const root = this.elementRef.nativeElement;
|
|
381
|
-
const prefixEl = root.querySelector('.select-trigger > [talosPrefix], .select-trigger > [talosTextPrefix], .select-trigger > [talos-prefix], .select-trigger > [talos-text-prefix], .select-trigger > [talosLead], .select-trigger > [talosStart], .select-trigger > [prefix], .select-trigger > .talos-input-prefix');
|
|
382
|
-
this.hasPrefix.set(!!prefixEl);
|
|
383
|
-
const suffixEl = root.querySelector('.select-trigger > [talosSuffix], .select-trigger > [talosPostfix], .select-trigger > [talosTextSuffix], .select-trigger > [talosTextPostfix], .select-trigger > [talos-suffix], .select-trigger > [talos-postfix], .select-trigger > [talosTrail], .select-trigger > [talosEnd], .select-trigger > [suffix], .select-trigger > .talos-input-suffix');
|
|
384
|
-
this.hasSuffix.set(!!suffixEl);
|
|
385
|
-
if (prefixEl) {
|
|
386
|
-
const prefixWidth = prefixEl.getBoundingClientRect().width;
|
|
387
|
-
if (prefixWidth > 0) {
|
|
388
|
-
root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
else {
|
|
392
|
-
root.style.removeProperty('--talos-prefix-offset');
|
|
393
|
-
}
|
|
394
|
-
if (suffixEl) {
|
|
395
|
-
const suffixWidth = suffixEl.getBoundingClientRect().width;
|
|
396
|
-
if (suffixWidth > 0) {
|
|
397
|
-
root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
else {
|
|
401
|
-
root.style.removeProperty('--talos-suffix-offset');
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
onDocumentClick(event) {
|
|
405
|
-
if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
|
|
406
|
-
this.close();
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SelectInputComponent, isStandalone: true, selector: "talos-select-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.select-sm": "size() === \"sm\"", "class.select-md": "size() === \"md\"", "class.select-lg": "size() === \"lg\"" }, classAttribute: "talos-select-host" }, providers: [
|
|
411
|
-
{
|
|
412
|
-
provide: NG_VALUE_ACCESSOR,
|
|
413
|
-
useExisting: forwardRef(() => SelectInputComponent),
|
|
414
|
-
multi: true
|
|
415
|
-
}
|
|
416
|
-
], queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: OptionGroupComponent, isSignal: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"select-control-container\">\n <!-- Select Control Trigger -->\n <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <div class=\"select-value-container\">\n @if (selectedOption()) {\n <span class=\"select-value-label\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"select-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <div class=\"select-actions\">\n @if (clearable() && selectedOption() && !effectiveDisabled()) {\n <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n @if (searchable()) {\n <div class=\"select-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n @if (searchValue()) {\n <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"select-options-list\">\n <ng-content></ng-content>\n @if (visibleOptions().length === 0) {\n <div class=\"select-no-options\">\n No matching options\n </div>\n }\n </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
|
|
417
|
-
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, decorators: [{
|
|
419
|
-
type: Component,
|
|
420
|
-
args: [{ selector: 'talos-select-input', providers: [
|
|
421
|
-
{
|
|
422
|
-
provide: NG_VALUE_ACCESSOR,
|
|
423
|
-
useExisting: forwardRef(() => SelectInputComponent),
|
|
424
|
-
multi: true
|
|
425
|
-
}
|
|
426
|
-
], host: {
|
|
427
|
-
'class': 'talos-select-host',
|
|
428
|
-
'[class.is-open]': 'isOpen()',
|
|
429
|
-
'[class.is-disabled]': 'effectiveDisabled()',
|
|
430
|
-
'[class.has-label]': '!!label()',
|
|
431
|
-
'[class.is-floating]': 'isFloatingMode()',
|
|
432
|
-
'[class.is-floated]': 'isFloated()',
|
|
433
|
-
'[class.has-prefix]': 'hasPrefix()',
|
|
434
|
-
'[class.has-suffix]': 'hasSuffix()',
|
|
435
|
-
'[class.select-sm]': 'size() === "sm"',
|
|
436
|
-
'[class.select-md]': 'size() === "md"',
|
|
437
|
-
'[class.select-lg]': 'size() === "lg"',
|
|
438
|
-
'(keydown)': 'onKeyDown($event)',
|
|
439
|
-
'(document:click)': 'onDocumentClick($event)'
|
|
440
|
-
}, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"select-control-container\">\n <!-- Select Control Trigger -->\n <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <div class=\"select-value-container\">\n @if (selectedOption()) {\n <span class=\"select-value-label\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"select-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <div class=\"select-actions\">\n @if (clearable() && selectedOption() && !effectiveDisabled()) {\n <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n @if (searchable()) {\n <div class=\"select-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n @if (searchValue()) {\n <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"select-options-list\">\n <ng-content></ng-content>\n @if (visibleOptions().length === 0) {\n <div class=\"select-no-options\">\n No matching options\n </div>\n }\n </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
|
|
441
|
-
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionGroupComponent), { isSignal: true }] }], searchInputEl: [{
|
|
442
|
-
type: ViewChild,
|
|
443
|
-
args: ['searchInput']
|
|
444
|
-
}], triggerEl: [{
|
|
445
|
-
type: ViewChild,
|
|
446
|
-
args: ['triggerEl']
|
|
447
|
-
}] } });
|
|
448
|
-
|
|
449
|
-
class CascadeSelectComponent {
|
|
450
|
-
elementRef = inject((ElementRef));
|
|
451
|
-
// Signal Inputs
|
|
452
|
-
options = input([], /* @ts-ignore */
|
|
453
|
-
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
454
|
-
placeholder = input('Select path...', /* @ts-ignore */
|
|
455
|
-
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
456
|
-
label = input('', /* @ts-ignore */
|
|
457
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
458
|
-
floatingLabel = input(false, /* @ts-ignore */
|
|
459
|
-
...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
|
|
460
|
-
floating = input(false, /* @ts-ignore */
|
|
461
|
-
...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
|
|
462
|
-
required = input(false, /* @ts-ignore */
|
|
463
|
-
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
464
|
-
disabled = input(false, /* @ts-ignore */
|
|
465
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
466
|
-
clearable = input(false, /* @ts-ignore */
|
|
467
|
-
...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
468
|
-
searchable = input(false, /* @ts-ignore */
|
|
469
|
-
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
470
|
-
searchPlaceholder = input('Search full hierarchy...', /* @ts-ignore */
|
|
471
|
-
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
472
|
-
expandTrigger = input('click', /* @ts-ignore */
|
|
473
|
-
...(ngDevMode ? [{ debugName: "expandTrigger" }] : /* istanbul ignore next */ []));
|
|
474
|
-
valueMode = input('path', /* @ts-ignore */
|
|
475
|
-
...(ngDevMode ? [{ debugName: "valueMode" }] : /* istanbul ignore next */ []));
|
|
476
|
-
separator = input(' / ', /* @ts-ignore */
|
|
477
|
-
...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
478
|
-
size = input('md', /* @ts-ignore */
|
|
479
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
480
|
-
// Signal Outputs
|
|
481
|
-
pathChange = output();
|
|
482
|
-
selectionChange = output();
|
|
483
|
-
opened = output();
|
|
484
|
-
closed = output();
|
|
485
|
-
// Internal Reactive State
|
|
486
|
-
isOpen = signal(false, /* @ts-ignore */
|
|
487
|
-
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
488
|
-
activePath = signal([], /* @ts-ignore */
|
|
489
|
-
...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
|
|
490
|
-
selectedPath = signal([], /* @ts-ignore */
|
|
491
|
-
...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
|
|
492
|
-
searchTerm = signal('', /* @ts-ignore */
|
|
493
|
-
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
494
|
-
highlightedSearchIndex = signal(0, /* @ts-ignore */
|
|
495
|
-
...(ngDevMode ? [{ debugName: "highlightedSearchIndex" }] : /* istanbul ignore next */ []));
|
|
496
|
-
hasPrefix = signal(false, /* @ts-ignore */
|
|
497
|
-
...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
498
|
-
hasSuffix = signal(false, /* @ts-ignore */
|
|
499
|
-
...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
500
|
-
// Form Control State
|
|
501
|
-
hasError = signal(false, /* @ts-ignore */
|
|
502
|
-
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
503
|
-
searchInputEl;
|
|
504
|
-
triggerBoxEl;
|
|
505
|
-
onChange = () => { };
|
|
506
|
-
onTouched = () => { };
|
|
507
|
-
isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
|
|
508
|
-
...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
|
|
509
|
-
displayLabel = computed(() => {
|
|
510
|
-
const sel = this.selectedPath();
|
|
511
|
-
if (!sel || sel.length === 0) {
|
|
512
|
-
return '';
|
|
513
|
-
}
|
|
514
|
-
return sel.map((opt) => opt.label).join(this.separator());
|
|
515
|
-
}, /* @ts-ignore */
|
|
516
|
-
...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
517
|
-
isFloated = computed(() => {
|
|
518
|
-
return this.isOpen() || !!this.displayLabel();
|
|
519
|
-
}, /* @ts-ignore */
|
|
520
|
-
...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
|
|
521
|
-
// Dynamic Column List for Cascade Panels
|
|
522
|
-
activeColumns = computed(() => {
|
|
523
|
-
const rootOptions = this.options();
|
|
524
|
-
const currentActive = this.activePath();
|
|
525
|
-
const columns = [];
|
|
526
|
-
// Root column
|
|
527
|
-
columns.push({
|
|
528
|
-
depth: 0,
|
|
529
|
-
options: rootOptions,
|
|
530
|
-
selectedOption: currentActive[0] || null
|
|
531
|
-
});
|
|
532
|
-
// Sub-columns following the active path
|
|
533
|
-
for (let i = 0; i < currentActive.length; i++) {
|
|
534
|
-
const activeOpt = currentActive[i];
|
|
535
|
-
if (activeOpt && activeOpt.children && activeOpt.children.length > 0) {
|
|
536
|
-
columns.push({
|
|
537
|
-
depth: i + 1,
|
|
538
|
-
options: activeOpt.children,
|
|
539
|
-
selectedOption: currentActive[i + 1] || null
|
|
540
|
-
});
|
|
541
|
-
}
|
|
542
|
-
}
|
|
543
|
-
return columns;
|
|
544
|
-
}, /* @ts-ignore */
|
|
545
|
-
...(ngDevMode ? [{ debugName: "activeColumns" }] : /* istanbul ignore next */ []));
|
|
546
|
-
// Flat Search Index for Typeahead Search
|
|
547
|
-
allSearchablePaths = computed(() => {
|
|
548
|
-
const results = [];
|
|
549
|
-
const rootOptions = this.options();
|
|
550
|
-
const traverse = (opts, currentPath) => {
|
|
551
|
-
for (const opt of opts) {
|
|
552
|
-
const nextPath = [...currentPath, opt];
|
|
553
|
-
const isLeaf = !opt.children || opt.children.length === 0 || opt.leaf;
|
|
554
|
-
if (isLeaf) {
|
|
555
|
-
results.push({
|
|
556
|
-
option: opt,
|
|
557
|
-
path: nextPath,
|
|
558
|
-
labelPath: nextPath.map((p) => p.label).join(this.separator()),
|
|
559
|
-
valuePath: nextPath.map((p) => p.value),
|
|
560
|
-
disabled: nextPath.some((p) => p.disabled)
|
|
561
|
-
});
|
|
562
|
-
}
|
|
563
|
-
if (opt.children && opt.children.length > 0) {
|
|
564
|
-
traverse(opt.children, nextPath);
|
|
565
|
-
}
|
|
566
|
-
}
|
|
567
|
-
};
|
|
568
|
-
traverse(rootOptions, []);
|
|
569
|
-
return results;
|
|
570
|
-
}, /* @ts-ignore */
|
|
571
|
-
...(ngDevMode ? [{ debugName: "allSearchablePaths" }] : /* istanbul ignore next */ []));
|
|
572
|
-
filteredSearchResults = computed(() => {
|
|
573
|
-
const term = this.searchTerm().toLowerCase().trim();
|
|
574
|
-
if (!term) {
|
|
575
|
-
return [];
|
|
576
|
-
}
|
|
577
|
-
return this.allSearchablePaths().filter((match) => match.labelPath.toLowerCase().includes(term));
|
|
578
|
-
}, /* @ts-ignore */
|
|
579
|
-
...(ngDevMode ? [{ debugName: "filteredSearchResults" }] : /* istanbul ignore next */ []));
|
|
580
|
-
// ControlValueAccessor Implementation
|
|
581
|
-
writeValue(value) {
|
|
582
|
-
if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
|
|
583
|
-
this.selectedPath.set([]);
|
|
584
|
-
this.activePath.set([]);
|
|
585
|
-
return;
|
|
586
|
-
}
|
|
587
|
-
const matchedPath = this.findPathForValue(value, this.options());
|
|
588
|
-
if (matchedPath) {
|
|
589
|
-
this.selectedPath.set(matchedPath);
|
|
590
|
-
this.activePath.set(matchedPath);
|
|
591
|
-
}
|
|
592
|
-
}
|
|
593
|
-
registerOnChange(fn) {
|
|
594
|
-
this.onChange = fn;
|
|
595
|
-
}
|
|
596
|
-
registerOnTouched(fn) {
|
|
597
|
-
this.onTouched = fn;
|
|
598
|
-
}
|
|
599
|
-
setDisabledState(isDisabled) {
|
|
600
|
-
// Handled via input or form state
|
|
601
|
-
}
|
|
602
|
-
toggleDropdown() {
|
|
603
|
-
if (this.disabled()) {
|
|
604
|
-
return;
|
|
605
|
-
}
|
|
606
|
-
if (this.isOpen()) {
|
|
607
|
-
this.closeDropdown();
|
|
608
|
-
}
|
|
609
|
-
else {
|
|
610
|
-
this.openDropdown();
|
|
611
|
-
}
|
|
612
|
-
}
|
|
613
|
-
openDropdown() {
|
|
614
|
-
if (this.disabled()) {
|
|
615
|
-
return;
|
|
616
|
-
}
|
|
617
|
-
this.isOpen.set(true);
|
|
618
|
-
this.searchTerm.set('');
|
|
619
|
-
// Sync active path with selected path on open
|
|
620
|
-
this.activePath.set([...this.selectedPath()]);
|
|
621
|
-
this.opened.emit();
|
|
622
|
-
if (this.searchable()) {
|
|
623
|
-
setTimeout(() => {
|
|
624
|
-
this.searchInputEl?.nativeElement.focus();
|
|
625
|
-
}, 50);
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
closeDropdown() {
|
|
629
|
-
if (!this.isOpen()) {
|
|
630
|
-
return;
|
|
631
|
-
}
|
|
632
|
-
this.isOpen.set(false);
|
|
633
|
-
this.searchTerm.set('');
|
|
634
|
-
this.onTouched();
|
|
635
|
-
this.closed.emit();
|
|
636
|
-
}
|
|
637
|
-
onDocumentClick(event) {
|
|
638
|
-
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
639
|
-
this.closeDropdown();
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
hasChildren(option) {
|
|
643
|
-
return !!option.children && option.children.length > 0 && !option.leaf;
|
|
644
|
-
}
|
|
645
|
-
isOptionSelected(depth, option) {
|
|
646
|
-
const sel = this.selectedPath();
|
|
647
|
-
return sel[depth]?.value === option.value;
|
|
648
|
-
}
|
|
649
|
-
isOptionActiveBranch(depth, option) {
|
|
650
|
-
const active = this.activePath();
|
|
651
|
-
return active[depth]?.value === option.value;
|
|
652
|
-
}
|
|
653
|
-
onOptionHover(depth, option) {
|
|
654
|
-
if (this.expandTrigger() !== 'hover' || option.disabled) {
|
|
655
|
-
return;
|
|
656
|
-
}
|
|
657
|
-
this.expandOption(depth, option);
|
|
658
|
-
}
|
|
659
|
-
onOptionClick(depth, option) {
|
|
660
|
-
if (option.disabled) {
|
|
661
|
-
return;
|
|
662
|
-
}
|
|
663
|
-
if (this.hasChildren(option)) {
|
|
664
|
-
this.expandOption(depth, option);
|
|
665
|
-
}
|
|
666
|
-
else {
|
|
667
|
-
// Leaf Node Selection
|
|
668
|
-
const newPath = [...this.activePath().slice(0, depth), option];
|
|
669
|
-
this.commitSelection(newPath);
|
|
670
|
-
}
|
|
671
|
-
}
|
|
672
|
-
expandOption(depth, option) {
|
|
673
|
-
const newActive = [...this.activePath().slice(0, depth), option];
|
|
674
|
-
this.activePath.set(newActive);
|
|
675
|
-
}
|
|
676
|
-
commitSelection(path) {
|
|
677
|
-
this.selectedPath.set(path);
|
|
678
|
-
this.activePath.set(path);
|
|
679
|
-
const emittedValue = this.valueMode() === 'leaf'
|
|
680
|
-
? path[path.length - 1]?.value
|
|
681
|
-
: path.map((p) => p.value);
|
|
682
|
-
this.onChange(emittedValue);
|
|
683
|
-
this.selectionChange.emit(emittedValue);
|
|
684
|
-
this.pathChange.emit(path);
|
|
685
|
-
this.closeDropdown();
|
|
686
|
-
}
|
|
687
|
-
onClear(event) {
|
|
688
|
-
event.stopPropagation();
|
|
689
|
-
this.selectedPath.set([]);
|
|
690
|
-
this.activePath.set([]);
|
|
691
|
-
const emptyVal = this.valueMode() === 'leaf' ? null : [];
|
|
692
|
-
this.onChange(emptyVal);
|
|
693
|
-
this.selectionChange.emit(emptyVal);
|
|
694
|
-
this.pathChange.emit([]);
|
|
695
|
-
}
|
|
696
|
-
// Search Logic
|
|
697
|
-
onSearchInput(event) {
|
|
698
|
-
const input = event.target;
|
|
699
|
-
this.searchTerm.set(input.value);
|
|
700
|
-
this.highlightedSearchIndex.set(0);
|
|
701
|
-
}
|
|
702
|
-
clearSearch() {
|
|
703
|
-
this.searchTerm.set('');
|
|
704
|
-
this.searchInputEl?.nativeElement.focus();
|
|
705
|
-
}
|
|
706
|
-
selectSearchResult(match) {
|
|
707
|
-
if (match.disabled) {
|
|
708
|
-
return;
|
|
709
|
-
}
|
|
710
|
-
this.commitSelection(match.path);
|
|
711
|
-
}
|
|
712
|
-
onSearchKeyDown(event) {
|
|
713
|
-
const results = this.filteredSearchResults();
|
|
714
|
-
if (results.length === 0) {
|
|
715
|
-
return;
|
|
716
|
-
}
|
|
717
|
-
if (event.key === 'ArrowDown') {
|
|
718
|
-
event.preventDefault();
|
|
719
|
-
this.highlightedSearchIndex.update((idx) => (idx + 1) % results.length);
|
|
720
|
-
}
|
|
721
|
-
else if (event.key === 'ArrowUp') {
|
|
722
|
-
event.preventDefault();
|
|
723
|
-
this.highlightedSearchIndex.update((idx) => (idx - 1 + results.length) % results.length);
|
|
724
|
-
}
|
|
725
|
-
else if (event.key === 'Enter') {
|
|
726
|
-
event.preventDefault();
|
|
727
|
-
const current = results[this.highlightedSearchIndex()];
|
|
728
|
-
if (current) {
|
|
729
|
-
this.selectSearchResult(current);
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
else if (event.key === 'Escape') {
|
|
733
|
-
event.preventDefault();
|
|
734
|
-
this.closeDropdown();
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
onKeyDown(event) {
|
|
738
|
-
if (this.disabled()) {
|
|
739
|
-
return;
|
|
740
|
-
}
|
|
741
|
-
if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
|
|
742
|
-
if (!this.isOpen()) {
|
|
743
|
-
event.preventDefault();
|
|
744
|
-
this.openDropdown();
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
else if (event.key === 'Escape') {
|
|
748
|
-
if (this.isOpen()) {
|
|
749
|
-
event.preventDefault();
|
|
750
|
-
this.closeDropdown();
|
|
751
|
-
}
|
|
752
|
-
}
|
|
753
|
-
}
|
|
754
|
-
findPathForValue(val, options) {
|
|
755
|
-
// If value is array of path keys: ['na', 'usa', 'sf']
|
|
756
|
-
if (Array.isArray(val)) {
|
|
757
|
-
let currentLevel = options;
|
|
758
|
-
const resolvedPath = [];
|
|
759
|
-
for (const segment of val) {
|
|
760
|
-
const match = currentLevel.find((o) => o.value === segment);
|
|
761
|
-
if (!match) {
|
|
762
|
-
return null;
|
|
763
|
-
}
|
|
764
|
-
resolvedPath.push(match);
|
|
765
|
-
if (match.children) {
|
|
766
|
-
currentLevel = match.children;
|
|
767
|
-
}
|
|
768
|
-
}
|
|
769
|
-
return resolvedPath.length === val.length ? resolvedPath : null;
|
|
770
|
-
}
|
|
771
|
-
// If value is single leaf key: 'sf'
|
|
772
|
-
const searchLeaf = (opts, path) => {
|
|
773
|
-
for (const opt of opts) {
|
|
774
|
-
const nextPath = [...path, opt];
|
|
775
|
-
if (opt.value === val) {
|
|
776
|
-
return nextPath;
|
|
777
|
-
}
|
|
778
|
-
if (opt.children && opt.children.length > 0) {
|
|
779
|
-
const res = searchLeaf(opt.children, nextPath);
|
|
780
|
-
if (res) {
|
|
781
|
-
return res;
|
|
782
|
-
}
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
|
-
return null;
|
|
786
|
-
};
|
|
787
|
-
return searchLeaf(options, []);
|
|
788
|
-
}
|
|
789
|
-
ngAfterContentChecked() {
|
|
790
|
-
this.checkAffixes();
|
|
791
|
-
}
|
|
792
|
-
checkAffixes() {
|
|
793
|
-
const root = this.elementRef.nativeElement;
|
|
794
|
-
const prefixEl = root.querySelector('.cascade-trigger > [talosPrefix], .cascade-trigger > [talosTextPrefix], .cascade-trigger > [talos-prefix], .cascade-trigger > [talos-text-prefix], .cascade-trigger > [talosLead], .cascade-trigger > [talosStart], .cascade-trigger > [prefix], .cascade-trigger > .talos-input-prefix');
|
|
795
|
-
this.hasPrefix.set(!!prefixEl);
|
|
796
|
-
const suffixEl = root.querySelector('.cascade-trigger > [talosSuffix], .cascade-trigger > [talosPostfix], .cascade-trigger > [talosTextSuffix], .cascade-trigger > [talosTextPostfix], .cascade-trigger > [talos-suffix], .cascade-trigger > [talos-postfix], .cascade-trigger > [talosTrail], .cascade-trigger > [talosEnd], .cascade-trigger > [suffix], .cascade-trigger > .talos-input-suffix');
|
|
797
|
-
this.hasSuffix.set(!!suffixEl);
|
|
798
|
-
if (prefixEl) {
|
|
799
|
-
const prefixWidth = prefixEl.getBoundingClientRect().width;
|
|
800
|
-
if (prefixWidth > 0) {
|
|
801
|
-
root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
else {
|
|
805
|
-
root.style.removeProperty('--talos-prefix-offset');
|
|
806
|
-
}
|
|
807
|
-
if (suffixEl) {
|
|
808
|
-
const suffixWidth = suffixEl.getBoundingClientRect().width;
|
|
809
|
-
if (suffixWidth > 0) {
|
|
810
|
-
root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
else {
|
|
814
|
-
root.style.removeProperty('--talos-suffix-offset');
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
818
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CascadeSelectComponent, isStandalone: true, selector: "talos-cascade-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, valueMode: { classPropertyName: "valueMode", publicName: "valueMode", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pathChange: "pathChange", selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "class.talos-cascade-select": "true", "class.is-open": "isOpen()", "class.is-disabled": "disabled()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.cascade-sm": "size() === \"sm\"", "class.cascade-md": "size() === \"md\"", "class.cascade-lg": "size() === \"lg\"" } }, providers: [
|
|
819
|
-
{
|
|
820
|
-
provide: NG_VALUE_ACCESSOR,
|
|
821
|
-
useExisting: forwardRef(() => CascadeSelectComponent),
|
|
822
|
-
multi: true
|
|
823
|
-
}
|
|
824
|
-
], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerBoxEl", first: true, predicate: ["triggerBox"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n <!-- Main Select Trigger Box -->\n <div\n #triggerBox\n class=\"cascade-trigger\"\n [class.is-empty]=\"!displayLabel()\"\n [class.is-disabled]=\"disabled()\"\n [class.has-error]=\"hasError()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\">\n\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <!-- Display Value or Placeholder -->\n <div class=\"trigger-content\">\n @if (displayLabel()) {\n <span class=\"display-text\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <!-- Actions (Clear & Chevron) -->\n <div class=\"trigger-actions\">\n @if (clearable() && displayLabel() && !disabled()) {\n <button\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <!-- Cascading Dropdown Overlay -->\n @if (isOpen()) {\n <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <!-- Typeahead Search Container -->\n @if (searchable()) {\n <div class=\"cascade-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"cascade-search-input search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeyDown($event)\"\n aria-label=\"Search cascade hierarchy\" />\n\n @if (searchTerm()) {\n <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Search Results View -->\n @if (searchTerm()) {\n <div class=\"search-results-list\">\n @if (filteredSearchResults().length === 0) {\n <div class=\"empty-state\">No matching paths found</div>\n } @else {\n @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n <div\n class=\"search-result-item\"\n [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n [class.is-disabled]=\"match.disabled\"\n (click)=\"selectSearchResult(match)\">\n <span class=\"match-path\">{{ match.labelPath }}</span>\n </div>\n }\n }\n </div>\n } @else {\n <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n <div class=\"cascade-columns-container\">\n @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n @if (col.options.length === 0) {\n <div class=\"empty-column-state\">No options</div>\n } @else {\n <div class=\"column-options-list\">\n @for (opt of col.options; track opt.value; let rowIdx = $index) {\n <div\n class=\"cascade-option-item\"\n [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n [class.is-disabled]=\"opt.disabled\"\n (mouseenter)=\"onOptionHover(colIdx, opt)\"\n (click)=\"onOptionClick(colIdx, opt)\">\n \n @if (opt.icon) {\n <span class=\"option-icon\">{{ opt.icon }}</span>\n }\n \n <span class=\"option-label\">{{ opt.label }}</span>\n \n @if (hasChildren(opt)) {\n <span class=\"option-arrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </span>\n } @else if (isOptionSelected(colIdx, opt)) {\n <span class=\"option-check\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
|
|
825
|
-
}
|
|
826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, decorators: [{
|
|
827
|
-
type: Component,
|
|
828
|
-
args: [{ selector: 'talos-cascade-select', providers: [
|
|
829
|
-
{
|
|
830
|
-
provide: NG_VALUE_ACCESSOR,
|
|
831
|
-
useExisting: forwardRef(() => CascadeSelectComponent),
|
|
832
|
-
multi: true
|
|
833
|
-
}
|
|
834
|
-
], host: {
|
|
835
|
-
'role': 'combobox',
|
|
836
|
-
'[attr.aria-expanded]': 'isOpen()',
|
|
837
|
-
'[attr.aria-disabled]': 'disabled()',
|
|
838
|
-
'[class.talos-cascade-select]': 'true',
|
|
839
|
-
'[class.is-open]': 'isOpen()',
|
|
840
|
-
'[class.is-disabled]': 'disabled()',
|
|
841
|
-
'[class.has-prefix]': 'hasPrefix()',
|
|
842
|
-
'[class.has-suffix]': 'hasSuffix()',
|
|
843
|
-
'[class.cascade-sm]': 'size() === "sm"',
|
|
844
|
-
'[class.cascade-md]': 'size() === "md"',
|
|
845
|
-
'[class.cascade-lg]': 'size() === "lg"',
|
|
846
|
-
'(document:click)': 'onDocumentClick($event)'
|
|
847
|
-
}, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n <!-- Main Select Trigger Box -->\n <div\n #triggerBox\n class=\"cascade-trigger\"\n [class.is-empty]=\"!displayLabel()\"\n [class.is-disabled]=\"disabled()\"\n [class.has-error]=\"hasError()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\">\n\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <!-- Display Value or Placeholder -->\n <div class=\"trigger-content\">\n @if (displayLabel()) {\n <span class=\"display-text\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <!-- Actions (Clear & Chevron) -->\n <div class=\"trigger-actions\">\n @if (clearable() && displayLabel() && !disabled()) {\n <button\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <!-- Cascading Dropdown Overlay -->\n @if (isOpen()) {\n <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <!-- Typeahead Search Container -->\n @if (searchable()) {\n <div class=\"cascade-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"cascade-search-input search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeyDown($event)\"\n aria-label=\"Search cascade hierarchy\" />\n\n @if (searchTerm()) {\n <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Search Results View -->\n @if (searchTerm()) {\n <div class=\"search-results-list\">\n @if (filteredSearchResults().length === 0) {\n <div class=\"empty-state\">No matching paths found</div>\n } @else {\n @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n <div\n class=\"search-result-item\"\n [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n [class.is-disabled]=\"match.disabled\"\n (click)=\"selectSearchResult(match)\">\n <span class=\"match-path\">{{ match.labelPath }}</span>\n </div>\n }\n }\n </div>\n } @else {\n <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n <div class=\"cascade-columns-container\">\n @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n @if (col.options.length === 0) {\n <div class=\"empty-column-state\">No options</div>\n } @else {\n <div class=\"column-options-list\">\n @for (opt of col.options; track opt.value; let rowIdx = $index) {\n <div\n class=\"cascade-option-item\"\n [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n [class.is-disabled]=\"opt.disabled\"\n (mouseenter)=\"onOptionHover(colIdx, opt)\"\n (click)=\"onOptionClick(colIdx, opt)\">\n \n @if (opt.icon) {\n <span class=\"option-icon\">{{ opt.icon }}</span>\n }\n \n <span class=\"option-label\">{{ opt.label }}</span>\n \n @if (hasChildren(opt)) {\n <span class=\"option-arrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </span>\n } @else if (isOptionSelected(colIdx, opt)) {\n <span class=\"option-check\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
|
|
848
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], valueMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMode", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchInputEl: [{
|
|
849
|
-
type: ViewChild,
|
|
850
|
-
args: ['searchInput']
|
|
851
|
-
}], triggerBoxEl: [{
|
|
852
|
-
type: ViewChild,
|
|
853
|
-
args: ['triggerBox']
|
|
854
|
-
}] } });
|
|
855
|
-
|
|
856
|
-
/**
|
|
857
|
-
* Convenience NgModule wrapping the standalone select input, option, and cascade select components.
|
|
858
|
-
*
|
|
859
|
-
* Allows developers who prefer `SelectInputModule` to import it into standalone components
|
|
860
|
-
* or legacy NgModule-based applications.
|
|
861
|
-
*/
|
|
862
|
-
class SelectInputModule {
|
|
863
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
864
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, imports: [SelectInputComponent,
|
|
865
|
-
OptionComponent,
|
|
866
|
-
OptionGroupComponent,
|
|
867
|
-
CascadeSelectComponent], exports: [SelectInputComponent,
|
|
868
|
-
OptionComponent,
|
|
869
|
-
OptionGroupComponent,
|
|
870
|
-
CascadeSelectComponent] });
|
|
871
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule });
|
|
872
|
-
}
|
|
873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, decorators: [{
|
|
874
|
-
type: NgModule,
|
|
875
|
-
args: [{
|
|
876
|
-
imports: [
|
|
877
|
-
SelectInputComponent,
|
|
878
|
-
OptionComponent,
|
|
879
|
-
OptionGroupComponent,
|
|
880
|
-
CascadeSelectComponent
|
|
881
|
-
],
|
|
882
|
-
exports: [
|
|
883
|
-
SelectInputComponent,
|
|
884
|
-
OptionComponent,
|
|
885
|
-
OptionGroupComponent,
|
|
886
|
-
CascadeSelectComponent
|
|
887
|
-
]
|
|
888
|
-
}]
|
|
889
|
-
}] });
|
|
890
|
-
|
|
891
|
-
/**
|
|
892
|
-
* Generated bundle index. Do not edit.
|
|
893
|
-
*/
|
|
894
|
-
|
|
895
|
-
export { CascadeSelectComponent, OptionComponent, OptionGroupComponent, SelectInputComponent, SelectInputModule };
|
|
896
|
-
//# sourceMappingURL=weeehaoooz-talos-ui-form-select-input.mjs.map
|