@skyux/lookup 11.17.0 → 11.19.0
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/documentation.json +1677 -1754
- package/esm2022/lib/modules/lookup/lookup.component.mjs +4 -4
- package/esm2022/lib/modules/search/search.component.mjs +3 -3
- package/esm2022/testing/lookup/lookup-harness.mjs +106 -1
- package/esm2022/testing/lookup/lookup-search-result-harness-filters.mjs +2 -0
- package/esm2022/testing/lookup/lookup-search-result-harness.mjs +21 -0
- package/fesm2022/skyux-lookup-testing.mjs +121 -0
- package/fesm2022/skyux-lookup-testing.mjs.map +1 -1
- package/fesm2022/skyux-lookup.mjs +5 -5
- package/fesm2022/skyux-lookup.mjs.map +1 -1
- package/package.json +11 -11
- package/testing/lookup/lookup-harness.d.ts +56 -0
- package/testing/lookup/lookup-search-result-harness-filters.d.ts +7 -0
- package/testing/lookup/lookup-search-result-harness.d.ts +17 -0
|
@@ -2119,7 +2119,7 @@ class SkySearchComponent {
|
|
|
2119
2119
|
});
|
|
2120
2120
|
}
|
|
2121
2121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySearchComponent, deps: [{ token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
2122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-clear-padding-right: 6px;--sky-override-search-mobile-font-size: 15px;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: #fff;--sky-override-search-container-padding: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-search-container{--sky-override-search-button-height-width: 40px;--sky-override-search-background-color: var(--modern-color-transparent);--sky-override-search-applied-mobile-button-vertical-padding: 9px;--sky-override-search-applied-mobile-button-horizontal-padding: 15px;--sky-override-search-mobile-button-vertical-padding: 9px;--sky-override-search-mobile-button-horizontal-padding: 15px;--sky-override-search-appied-border-width: 2px;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: var( --sky-color-background-action-secondary-base );--sky-override-input-icon-size: 17.3333px}sky-search .sky-search-btn-apply{padding-left:6px}sky-search .sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-override-search-appied-border-width, var(--sky-border-width-action-selected-s)) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action));padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-color-background-action-secondary-base));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-space-inset-balanced-xs))}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: var( --sky-override-search-background-color, var(--sky-color-background-action-secondary-base) )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));padding:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:var(--sky-border-radius-0);box-shadow:inset 0 -1px 0 0 var(--sky-color-border-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:var(--sky-override-input-icon-size, var(--sky-size-icon-s));color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-default);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
2123
2123
|
trigger('inputState', [
|
|
2124
2124
|
state(INPUT_HIDDEN_STATE, style({
|
|
2125
2125
|
opacity: 0,
|
|
@@ -2147,7 +2147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2147
2147
|
})),
|
|
2148
2148
|
transition('* <=> *', animate('150ms')),
|
|
2149
2149
|
]),
|
|
2150
|
-
], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
|
|
2150
|
+
], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n #searchInput=\"skyId\"\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n skyId\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor?.type === 'text'\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources\n : (contentInfoObs | async)?.descriptor?.value)\n : ('skyux_search_label' | skyLibResources))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.placeholder]=\"\n placeholderText || ('skyux_search_placeholder' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (keyup)=\"enterPress($event, searchText)\"\n (ngModelChange)=\"searchTextChanged($event)\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </button>\n </span>\n <div\n *skyThemeIf=\"'modern'\"\n aria-hidden=\"true\"\n class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n @if (mobileSearchShown) {\n <button\n class=\"sky-btn sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-clear-padding-right: 6px;--sky-override-search-mobile-font-size: 15px;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: #fff;--sky-override-search-container-padding: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-search-container{--sky-override-search-button-height-width: 40px;--sky-override-search-background-color: var(--modern-color-transparent);--sky-override-search-applied-mobile-button-vertical-padding: 9px;--sky-override-search-applied-mobile-button-horizontal-padding: 15px;--sky-override-search-mobile-button-vertical-padding: 9px;--sky-override-search-mobile-button-horizontal-padding: 15px;--sky-override-search-appied-border-width: 2px;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: var( --sky-color-background-action-secondary-base );--sky-override-input-icon-size: 17.3333px}sky-search .sky-search-btn-apply{padding-left:6px}sky-search .sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-override-search-appied-border-width, var(--sky-border-width-action-selected-s)) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action));padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-color-background-action-secondary-base));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-space-inset-balanced-xs))}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: var( --sky-override-search-background-color, var(--sky-color-background-action-secondary-base) )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));padding:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:var(--sky-border-radius-0);box-shadow:inset 0 -1px 0 0 var(--sky-color-border-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:var(--sky-override-input-icon-size, var(--sky-size-icon-s));color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-default);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"] }]
|
|
2151
2151
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
|
|
2152
2152
|
type: Input
|
|
2153
2153
|
}], ariaLabelledBy: [{
|
|
@@ -3090,7 +3090,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3090
3090
|
if (value?.length > 1) {
|
|
3091
3091
|
// The `setTimeout` is needed to avoid a `ExpressionChangedAfterItHasBeenCheckedError` error in template forms.
|
|
3092
3092
|
setTimeout(() => {
|
|
3093
|
-
this
|
|
3093
|
+
this.#setValue([value[0]], { emitEvent: true });
|
|
3094
3094
|
this.#changeDetector.detectChanges();
|
|
3095
3095
|
});
|
|
3096
3096
|
}
|
|
@@ -3539,7 +3539,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3539
3539
|
this.showMorePickerId = undefined;
|
|
3540
3540
|
/* istanbul ignore next */
|
|
3541
3541
|
selectedItems = selectedItems || [];
|
|
3542
|
-
this
|
|
3542
|
+
this.#setValue(selectedItems, { emitEvent: true });
|
|
3543
3543
|
this.#focusInput();
|
|
3544
3544
|
this.#changeDetector.markForCheck();
|
|
3545
3545
|
}
|
|
@@ -3649,7 +3649,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3649
3649
|
const newValue = this.selectMode === 'multiple'
|
|
3650
3650
|
? oldValue.concat(args.item)
|
|
3651
3651
|
: [args.item];
|
|
3652
|
-
this
|
|
3652
|
+
this.#setValue(newValue, { emitEvent: true });
|
|
3653
3653
|
}
|
|
3654
3654
|
}
|
|
3655
3655
|
}
|