@skyux/lookup 12.37.0 → 12.38.1
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.
|
@@ -3081,17 +3081,6 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3081
3081
|
get data() {
|
|
3082
3082
|
return this.#_data || [];
|
|
3083
3083
|
}
|
|
3084
|
-
/**
|
|
3085
|
-
* Whether to disable the lookup field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
|
|
3086
|
-
* To set the disabled state on reactive forms, use the `FormControl` instead.
|
|
3087
|
-
* @default false
|
|
3088
|
-
*/
|
|
3089
|
-
set disabled(value) {
|
|
3090
|
-
this.#_disabled = value ?? false;
|
|
3091
|
-
}
|
|
3092
|
-
get disabled() {
|
|
3093
|
-
return this.#_disabled;
|
|
3094
|
-
}
|
|
3095
3084
|
/**
|
|
3096
3085
|
* Whether the lookup field is required.
|
|
3097
3086
|
* @default false
|
|
@@ -3103,26 +3092,6 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3103
3092
|
get required() {
|
|
3104
3093
|
return this.#_required;
|
|
3105
3094
|
}
|
|
3106
|
-
/**
|
|
3107
|
-
* Whether to enable users to open a picker where they can view all options.
|
|
3108
|
-
* @default false
|
|
3109
|
-
*/
|
|
3110
|
-
set enableShowMore(value) {
|
|
3111
|
-
this.#_enableShowMore = value ?? false;
|
|
3112
|
-
}
|
|
3113
|
-
get enableShowMore() {
|
|
3114
|
-
return this.#_enableShowMore;
|
|
3115
|
-
}
|
|
3116
|
-
/**
|
|
3117
|
-
* Whether to display a button that lets users add options to the list.
|
|
3118
|
-
* @default false
|
|
3119
|
-
*/
|
|
3120
|
-
set showAddButton(value) {
|
|
3121
|
-
this.#_showAddButton = value ?? false;
|
|
3122
|
-
}
|
|
3123
|
-
get showAddButton() {
|
|
3124
|
-
return this.#_showAddButton;
|
|
3125
|
-
}
|
|
3126
3095
|
/**
|
|
3127
3096
|
* The ability for users to select one option or multiple options.
|
|
3128
3097
|
* @default "multiple"
|
|
@@ -3194,10 +3163,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3194
3163
|
#_required;
|
|
3195
3164
|
#_autocompleteInputDirective;
|
|
3196
3165
|
#_data;
|
|
3197
|
-
#_disabled;
|
|
3198
|
-
#_enableShowMore;
|
|
3199
3166
|
#_selectMode;
|
|
3200
|
-
#_showAddButton;
|
|
3201
3167
|
#_tokens;
|
|
3202
3168
|
#_value;
|
|
3203
3169
|
#adapter;
|
|
@@ -3226,6 +3192,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3226
3192
|
super();
|
|
3227
3193
|
this.inputBoxHostSvc = inputBoxHostSvc;
|
|
3228
3194
|
this.themeSvc = themeSvc;
|
|
3195
|
+
/**
|
|
3196
|
+
* Whether to disable the lookup field on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
|
|
3197
|
+
* To set the disabled state on reactive forms, use the `FormControl` instead.
|
|
3198
|
+
* @default false
|
|
3199
|
+
*/
|
|
3200
|
+
this.disabled = false;
|
|
3201
|
+
/**
|
|
3202
|
+
* Whether to enable users to open a picker where they can view all options.
|
|
3203
|
+
* @default false
|
|
3204
|
+
*/
|
|
3205
|
+
this.enableShowMore = false;
|
|
3206
|
+
/**
|
|
3207
|
+
* Whether to display a button that lets users add options to the list.
|
|
3208
|
+
* @default false
|
|
3209
|
+
*/
|
|
3210
|
+
this.showAddButton = false;
|
|
3229
3211
|
/**
|
|
3230
3212
|
* Fires when users select the button to add options to the list.
|
|
3231
3213
|
*/
|
|
@@ -3245,9 +3227,6 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3245
3227
|
this.#markForTokenFocusOnKeyUp = false;
|
|
3246
3228
|
this.#ngUnsubscribe = new Subject();
|
|
3247
3229
|
this.#_required = false;
|
|
3248
|
-
this.#_disabled = false;
|
|
3249
|
-
this.#_enableShowMore = false;
|
|
3250
|
-
this.#_showAddButton = false;
|
|
3251
3230
|
this.#adapter = inject(SkyLookupAdapterService);
|
|
3252
3231
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
3253
3232
|
this.#elementRef = inject(ElementRef);
|
|
@@ -3740,7 +3719,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3740
3719
|
return !!(this.#openNativePicker || this.#openSelectionModal);
|
|
3741
3720
|
}
|
|
3742
3721
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i3$1.NgControl, optional: true, self: true }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i6.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", required: ["required", "required", booleanAttribute], enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3722
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], enableShowMore: ["enableShowMore", "enableShowMore", booleanAttribute], placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n <div\n #lookupWrapper\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n @if (selectMode === 'multiple') {\n <sky-tokens\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </sky-tokens>\n } @else if (selectMode === 'single') {\n <div class=\"sky-lookup-single-control\">\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-describedby]=\"ariaDescribedBy | async\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n @if (!inputBoxHostSvc && !enableShowMore) {\n <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\" />\n }\n </div>\n }\n </div>\n @if (!inputBoxHostSvc && enableShowMore) {\n <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n }\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon iconName=\"search\" iconSize=\"l\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-theme-modern:not(.sky-theme-brand-base) .sky-lookup{--sky-override-lookup-input-box-search-disabled-background-color: transparent;--sky-override-lookup-input-box-search-padding: 0 0 0 15px;--sky-override-lookup-input-box-single-control-padding-left: 0;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-disabled-background-color, inherit)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0;align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:var(--sky-override-lookup-input-box-single-control-padding-left, inherit)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3744
3723
|
}
|
|
3745
3724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyLookupComponent, decorators: [{
|
|
3746
3725
|
type: Component,
|
|
@@ -3762,18 +3741,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3762
3741
|
}], data: [{
|
|
3763
3742
|
type: Input
|
|
3764
3743
|
}], disabled: [{
|
|
3765
|
-
type: Input
|
|
3744
|
+
type: Input,
|
|
3745
|
+
args: [{ transform: booleanAttribute }]
|
|
3766
3746
|
}], required: [{
|
|
3767
3747
|
type: Input,
|
|
3768
3748
|
args: [{ transform: booleanAttribute }]
|
|
3769
3749
|
}], enableShowMore: [{
|
|
3770
|
-
type: Input
|
|
3750
|
+
type: Input,
|
|
3751
|
+
args: [{ transform: booleanAttribute }]
|
|
3771
3752
|
}], placeholderText: [{
|
|
3772
3753
|
type: Input
|
|
3773
3754
|
}], idProperty: [{
|
|
3774
3755
|
type: Input
|
|
3775
3756
|
}], showAddButton: [{
|
|
3776
|
-
type: Input
|
|
3757
|
+
type: Input,
|
|
3758
|
+
args: [{ transform: booleanAttribute }]
|
|
3777
3759
|
}], showMoreConfig: [{
|
|
3778
3760
|
type: Input
|
|
3779
3761
|
}], selectMode: [{
|