@almoamendev/ngx-md3 0.8.0 → 0.8.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.
|
@@ -6109,33 +6109,39 @@ class SelectOptions {
|
|
|
6109
6109
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
6110
6110
|
multiple = input(false, /* @ts-ignore */
|
|
6111
6111
|
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
6112
|
+
/**
|
|
6113
|
+
* The options left after the search filter of the field. SelectField writes into this
|
|
6114
|
+
* signal while the menu is open, because menu inputs are bound once, at open. null means
|
|
6115
|
+
* that no filter applies, so every option is shown.
|
|
6116
|
+
*/
|
|
6117
|
+
visibleOptions = signal(null, /* @ts-ignore */
|
|
6118
|
+
...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
|
|
6112
6119
|
/** Emits the values selected by the user. The field owns the selection state. */
|
|
6113
6120
|
selectionChange = output();
|
|
6114
|
-
|
|
6121
|
+
renderedOptions = computed(() => this.visibleOptions() ?? this.options(), /* @ts-ignore */
|
|
6122
|
+
...(ngDevMode ? [{ debugName: "renderedOptions" }] : /* istanbul ignore next */ []));
|
|
6123
|
+
optionClick(option) {
|
|
6115
6124
|
const options = this.options();
|
|
6116
|
-
const option = options.at(index);
|
|
6117
|
-
if (!option) {
|
|
6118
|
-
return;
|
|
6119
|
-
}
|
|
6120
6125
|
if (this.multiple()) {
|
|
6121
6126
|
option.selected = !(option.selected ?? false);
|
|
6122
6127
|
}
|
|
6123
6128
|
else {
|
|
6124
|
-
options.forEach((item
|
|
6125
|
-
item.selected =
|
|
6129
|
+
options.forEach((item) => {
|
|
6130
|
+
item.selected = item === option;
|
|
6126
6131
|
});
|
|
6127
6132
|
}
|
|
6133
|
+
// Reported from the full list, so a selected option hidden by the search is kept.
|
|
6128
6134
|
this.selectionChange.emit(options.filter((item) => item.selected).map((item) => item.value));
|
|
6129
6135
|
}
|
|
6130
6136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectOptions, isStandalone: true, selector: "md3-select-options", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of
|
|
6137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectOptions, isStandalone: true, selector: "md3-select-options", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: MenuGroup, selector: "md3-menu-group" }, { kind: "component", type: MenuItem, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: ["label", "supporting-text", "trailing-text", "selected"], outputs: ["selectedChange"] }] });
|
|
6132
6138
|
}
|
|
6133
6139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, decorators: [{
|
|
6134
6140
|
type: Component,
|
|
6135
6141
|
args: [{ selector: 'md3-select-options', imports: [
|
|
6136
6142
|
MenuGroup,
|
|
6137
6143
|
MenuItem,
|
|
6138
|
-
], template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of
|
|
6144
|
+
], template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"] }]
|
|
6139
6145
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
6140
6146
|
|
|
6141
6147
|
const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
|
|
@@ -6740,6 +6746,11 @@ class SelectField {
|
|
|
6740
6746
|
options = input.required(/* @ts-ignore */
|
|
6741
6747
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
6742
6748
|
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6749
|
+
/**
|
|
6750
|
+
* Lets the user type in the field to filter the options. While the field has focus it
|
|
6751
|
+
* acts as a search box; the selected options are shown again as soon as it loses focus.
|
|
6752
|
+
*/
|
|
6753
|
+
searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6743
6754
|
label = input(null, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'label' });
|
|
6744
6755
|
/**
|
|
6745
6756
|
* Formats the text shown in the field. The default joins the labels of the selected
|
|
@@ -6753,6 +6764,7 @@ class SelectField {
|
|
|
6753
6764
|
*/
|
|
6754
6765
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6755
6766
|
menuColors = input('standard', { ...(ngDevMode ? { debugName: "menuColors" } : /* istanbul ignore next */ {}), alias: 'menu-colors' });
|
|
6767
|
+
scrollStrategy = input(undefined, { ...(ngDevMode ? { debugName: "scrollStrategy" } : /* istanbul ignore next */ {}), alias: 'menu-scroll-strategy' });
|
|
6756
6768
|
fieldType = input('filled', { ...(ngDevMode ? { debugName: "fieldType" } : /* istanbul ignore next */ {}), alias: 'field-type' });
|
|
6757
6769
|
/**
|
|
6758
6770
|
* Control passed explicitly, mirroring md3-text-field. Takes precedence over a form
|
|
@@ -6784,6 +6796,10 @@ class SelectField {
|
|
|
6784
6796
|
/** Selection is kept by value so it survives options arriving or being replaced later. */
|
|
6785
6797
|
selectedValues = signal([], /* @ts-ignore */
|
|
6786
6798
|
...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
|
|
6799
|
+
searchQuery = signal('', /* @ts-ignore */
|
|
6800
|
+
...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
|
|
6801
|
+
isInputFocused = signal(false, /* @ts-ignore */
|
|
6802
|
+
...(ngDevMode ? [{ debugName: "isInputFocused" }] : /* istanbul ignore next */ []));
|
|
6787
6803
|
formControl = computed(() => this.control() ?? this.hostControl(), /* @ts-ignore */
|
|
6788
6804
|
...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
6789
6805
|
isDisabled = computed(() => this.disabled() || this.controlDisabled(), /* @ts-ignore */
|
|
@@ -6805,6 +6821,39 @@ class SelectField {
|
|
|
6805
6821
|
return selected.map((option) => option.label).join(', ');
|
|
6806
6822
|
}, /* @ts-ignore */
|
|
6807
6823
|
...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
|
|
6824
|
+
/** True while the field acts as a search box instead of showing the selection. */
|
|
6825
|
+
isSearching = computed(() => this.searchable() && !this.isDisabled() && this.isInputFocused(), /* @ts-ignore */
|
|
6826
|
+
...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
|
|
6827
|
+
/** What the input element shows: the search query while searching, the selection otherwise. */
|
|
6828
|
+
displayText = computed(() => this.isSearching() ? this.searchQuery() : this.selectedText(), /* @ts-ignore */
|
|
6829
|
+
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
6830
|
+
/**
|
|
6831
|
+
* Each option paired with the text the search runs against. It is rebuilt only when the
|
|
6832
|
+
* options array changes, so typing does not normalize the same text again and again.
|
|
6833
|
+
* The fields are joined with a character the query can never contain, which stops a query
|
|
6834
|
+
* from matching across two fields.
|
|
6835
|
+
*/
|
|
6836
|
+
searchIndex = computed(() => {
|
|
6837
|
+
return this.options().map((option) => ({
|
|
6838
|
+
option,
|
|
6839
|
+
text: [option.label, String(option.value), option.supportingText, option.trailingText]
|
|
6840
|
+
.filter((field) => !!field)
|
|
6841
|
+
.map((field) => this.normalizeSearchText(field))
|
|
6842
|
+
.join('\u0000'),
|
|
6843
|
+
}));
|
|
6844
|
+
}, /* @ts-ignore */
|
|
6845
|
+
...(ngDevMode ? [{ debugName: "searchIndex" }] : /* istanbul ignore next */ []));
|
|
6846
|
+
/** The options the menu shows. Options that do not match the query are hidden. */
|
|
6847
|
+
filteredOptions = computed(() => {
|
|
6848
|
+
const query = this.normalizeSearchText(this.searchQuery());
|
|
6849
|
+
if (!this.searchable() || query.length == 0) {
|
|
6850
|
+
return this.options();
|
|
6851
|
+
}
|
|
6852
|
+
return this.searchIndex()
|
|
6853
|
+
.filter((entry) => entry.text.includes(query))
|
|
6854
|
+
.map((entry) => entry.option);
|
|
6855
|
+
}, /* @ts-ignore */
|
|
6856
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
6808
6857
|
constructor(menuService, viewContainerRef) {
|
|
6809
6858
|
this.menuService = menuService;
|
|
6810
6859
|
this.viewContainerRef = viewContainerRef;
|
|
@@ -6851,8 +6900,33 @@ class SelectField {
|
|
|
6851
6900
|
}
|
|
6852
6901
|
this.menuRef?.close();
|
|
6853
6902
|
this.menuRef = null;
|
|
6903
|
+
this.searchQuery.set('');
|
|
6854
6904
|
});
|
|
6855
6905
|
});
|
|
6906
|
+
// Keeps an open menu in step with the query. The menu binds its inputs once, at open.
|
|
6907
|
+
effect(() => {
|
|
6908
|
+
const filtered = this.filteredOptions();
|
|
6909
|
+
untracked(() => this.menuRef?.componentInstance?.visibleOptions.set(filtered));
|
|
6910
|
+
});
|
|
6911
|
+
}
|
|
6912
|
+
// Search
|
|
6913
|
+
onSearchFocus() {
|
|
6914
|
+
this.isInputFocused.set(true);
|
|
6915
|
+
}
|
|
6916
|
+
onSearchBlur() {
|
|
6917
|
+
this.isInputFocused.set(false);
|
|
6918
|
+
this.searchQuery.set('');
|
|
6919
|
+
}
|
|
6920
|
+
onSearchInput(event) {
|
|
6921
|
+
if (!this.searchable()) {
|
|
6922
|
+
return;
|
|
6923
|
+
}
|
|
6924
|
+
this.searchQuery.set(event.target.value);
|
|
6925
|
+
this.openMenu();
|
|
6926
|
+
}
|
|
6927
|
+
/** Lower-cases the text and removes everything that is not a letter or a digit. */
|
|
6928
|
+
normalizeSearchText(text) {
|
|
6929
|
+
return text.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '');
|
|
6856
6930
|
}
|
|
6857
6931
|
// ControlValueAccessor
|
|
6858
6932
|
writeValue(value) {
|
|
@@ -6898,9 +6972,10 @@ class SelectField {
|
|
|
6898
6972
|
xPosition: 'start',
|
|
6899
6973
|
yPosition: 'below',
|
|
6900
6974
|
overlapTrigger: false,
|
|
6901
|
-
|
|
6975
|
+
scrollStrategy: this.scrollStrategy(),
|
|
6902
6976
|
viewContainerRef: this.viewContainerRef,
|
|
6903
6977
|
});
|
|
6978
|
+
this.menuRef.componentInstance?.visibleOptions.set(this.filteredOptions());
|
|
6904
6979
|
this.menuRef.componentInstance?.selectionChange.subscribe((values) => this.selectValues(values));
|
|
6905
6980
|
this.menuRef.afterClosed().subscribe(() => {
|
|
6906
6981
|
this.isMenuOpen.set(false);
|
|
@@ -6971,7 +7046,7 @@ class SelectField {
|
|
|
6971
7046
|
return current === next;
|
|
6972
7047
|
}
|
|
6973
7048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, deps: [{ token: MenuService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6974
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectField, isStandalone: true, selector: "md3-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "display-with", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuColors: { classPropertyName: "menuColors", publicName: "menu-colors", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "field-type", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputElement, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n @if (hasLeadingIcon()) {\n <div md3-icon-element=\"leading\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n </div>\n }\n\n <input md3-input-element type=\"text\" [readonly]=\"
|
|
7049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectField, isStandalone: true, selector: "md3-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "display-with", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuColors: { classPropertyName: "menuColors", publicName: "menu-colors", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "menu-scroll-strategy", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "field-type", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputElement, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n @if (hasLeadingIcon()) {\n <div md3-icon-element=\"leading\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n </div>\n }\n\n <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n class=\"md3-select-input\" [value]=\"displayText()\">\n\n <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n @if (hasArrowIcon()) {\n <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n } @else {\n <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n }\n </button>\n\n <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: TextField, selector: "md3-text-field", inputs: ["label", "field-type", "input-counter", "control"] }, { kind: "directive", type: IconElement, selector: "[md3-icon-element]", inputs: ["md3-icon-element"] }, { kind: "component", type: IconButton, selector: "button[md3-icon-button], a[md3-icon-button]", inputs: ["button-size", "button-type", "button-width", "button-squared", "selected"], outputs: ["selectedChange"] }, { kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }] });
|
|
6975
7050
|
}
|
|
6976
7051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, decorators: [{
|
|
6977
7052
|
type: Component,
|
|
@@ -6981,8 +7056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
6981
7056
|
IconButton,
|
|
6982
7057
|
InputElement,
|
|
6983
7058
|
MaterialIcon,
|
|
6984
|
-
], template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n @if (hasLeadingIcon()) {\n <div md3-icon-element=\"leading\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n </div>\n }\n\n <input md3-input-element type=\"text\" [readonly]=\"
|
|
6985
|
-
}], ctorParameters: () => [{ type: MenuService }, { type: i0.ViewContainerRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "display-with", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-colors", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputElement), { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
7059
|
+
], template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n @if (hasLeadingIcon()) {\n <div md3-icon-element=\"leading\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n </div>\n }\n\n <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n class=\"md3-select-input\" [value]=\"displayText()\">\n\n <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n @if (hasArrowIcon()) {\n <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n } @else {\n <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n }\n </button>\n\n <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"] }]
|
|
7060
|
+
}], ctorParameters: () => [{ type: MenuService }, { type: i0.ViewContainerRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "display-with", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-colors", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-scroll-strategy", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputElement), { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
6986
7061
|
|
|
6987
7062
|
/**
|
|
6988
7063
|
* Material 3 dialog shell. It extends the CDK dialog container, so focus
|