@skyux/lookup 15.0.0-alpha.2 → 15.0.0-alpha.4
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.
|
@@ -1993,6 +1993,7 @@ class SkySearchComponent {
|
|
|
1993
1993
|
.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
1994
1994
|
.subscribe((breakpoint) => {
|
|
1995
1995
|
this.#mediaQueryCallback(breakpoint);
|
|
1996
|
+
this.#changeRef.markForCheck();
|
|
1996
1997
|
});
|
|
1997
1998
|
}
|
|
1998
1999
|
this.#setupSearchChangedEvent();
|
|
@@ -2013,6 +2014,7 @@ class SkySearchComponent {
|
|
|
2013
2014
|
this.isFullWidth = false;
|
|
2014
2015
|
break;
|
|
2015
2016
|
}
|
|
2017
|
+
this.#changeRef.markForCheck();
|
|
2016
2018
|
}
|
|
2017
2019
|
if (this.#searchBindingChanged(changes)) {
|
|
2018
2020
|
this.#searchUpdated.next(this.searchText ?? '');
|
|
@@ -2022,8 +2024,8 @@ class SkySearchComponent {
|
|
|
2022
2024
|
this.mobileSearchShown = true;
|
|
2023
2025
|
this.searchButtonShown = false;
|
|
2024
2026
|
}
|
|
2027
|
+
this.#changeRef.markForCheck();
|
|
2025
2028
|
}
|
|
2026
|
-
this.#changeRef.detectChanges();
|
|
2027
2029
|
}
|
|
2028
2030
|
clearSearchText() {
|
|
2029
2031
|
this.searchText = '';
|
|
@@ -2068,6 +2070,7 @@ class SkySearchComponent {
|
|
|
2068
2070
|
this.#searchAdapter.focusInput(this.#elRef);
|
|
2069
2071
|
}, { injector: this.#injector });
|
|
2070
2072
|
}
|
|
2073
|
+
this.#changeRef.markForCheck();
|
|
2071
2074
|
}
|
|
2072
2075
|
}
|
|
2073
2076
|
onInputTransitionEnd() {
|
|
@@ -2076,6 +2079,7 @@ class SkySearchComponent {
|
|
|
2076
2079
|
this.searchButtonShown = true;
|
|
2077
2080
|
}
|
|
2078
2081
|
this.mobileSearchShown = false;
|
|
2082
|
+
this.#changeRef.markForCheck();
|
|
2079
2083
|
}
|
|
2080
2084
|
}
|
|
2081
2085
|
ngOnDestroy() {
|
|
@@ -2121,14 +2125,15 @@ class SkySearchComponent {
|
|
|
2121
2125
|
.pipe(debounceTime(this.debounceTime), distinctUntilChanged())
|
|
2122
2126
|
.subscribe((value) => {
|
|
2123
2127
|
this.searchChange.emit(value);
|
|
2128
|
+
this.#changeRef.markForCheck();
|
|
2124
2129
|
});
|
|
2125
2130
|
}
|
|
2126
2131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkySearchComponent, isStandalone: false, 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 skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\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 iconName=\"close\" />\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 *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}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-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-left, var(--sky-comp-button-space-inset-left)));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-right, var(--sky-comp-button-space-inset-right)))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.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-border-width-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))}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-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.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);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.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{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.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(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-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{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-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 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-deemphasized);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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i6.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i6._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkySearchComponent, isStandalone: false, 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 skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\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 iconName=\"close\" />\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 *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}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-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-left, var(--sky-comp-button-space-inset-left)));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-right, var(--sky-comp-button-space-inset-right)))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.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-border-width-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))}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-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.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);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.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{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.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(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-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{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-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 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-deemphasized);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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i6.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i6._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2128
2133
|
}
|
|
2129
2134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySearchComponent, decorators: [{
|
|
2130
2135
|
type: Component,
|
|
2131
|
-
args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, providers: [SkySearchAdapterService], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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 skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\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 iconName=\"close\" />\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 *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}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-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-left, var(--sky-comp-button-space-inset-left)));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-right, var(--sky-comp-button-space-inset-right)))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.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-border-width-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))}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-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.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);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.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{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.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(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-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{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-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 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-deemphasized);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"] }]
|
|
2136
|
+
args: [{ selector: 'sky-search', encapsulation: ViewEncapsulation.None, providers: [SkySearchAdapterService], standalone: false, 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 skyTransitionEndHandler\n transitionPropertyToTrack=\"opacity\"\n [class.sky-search-input-hidden]=\"!inputShown\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n [transitionTrigger]=\"inputShown\"\n (transitionEnd)=\"onInputTransitionEnd()\"\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 iconName=\"close\" />\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 *skyThemeIf=\"'default'\" iconName=\"chevron-left\" />\n <sky-icon *skyThemeIf=\"'modern'\" iconName=\"chevron-double-left\" />\n </button>\n }\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon iconName=\"search\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-applied-background-color: #fff;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-clear-padding-right: 6px;--sky-override-search-container-padding: 5px;--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-font-size: 15px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-apply{padding-left:6px}sky-search .sky-input-group-btn .sky-btn.sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container{opacity:1;width:100%;transition-property:opacity,width;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease}sky-search .sky-search-input-container.sky-search-input-hidden{opacity:0;width:0;overflow:hidden}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-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-left, var(--sky-comp-button-space-inset-left)));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-comp-override-button-padding-right, var(--sky-comp-button-space-inset-right)))}sky-search .sky-search-btn-open-applied.sky-search-btn-open{padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-top));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-comp-button-space-inset-bottom));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-left));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-comp-button-space-inset-right))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied .sky-btn.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-border-width-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))}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-comp-override-list-header-background-color));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-comp-search-space-offset-top) var(--sky-comp-search-space-offset-right) var(--sky-comp-search-space-offset-bottom) var(--sky-comp-search-space-offset-left));z-index:1}.sky-theme-modern sky-search sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-color-background-action-secondary-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-action-secondary-active );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-comp-override-input-box-group-background-color-focused: var( --sky-color-background-action-secondary-focus );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-action-secondary-hover )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-top) + var(--sky-comp-search-space-inset-bottom));width:calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-comp-search-space-inset-left) + var(--sky-comp-search-space-inset-right))}.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);padding:var(--sky-comp-button-toolbar-space-inset-top) var(--sky-comp-button-toolbar-space-inset-right) var(--sky-comp-button-toolbar-space-inset-bottom) var(--sky-comp-button-toolbar-space-inset-left)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-disabled .sky-input-box-group .sky-input-box-group-form-control .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-disabled )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-base );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-base )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover:not(.sky-input-box-group-form-control-focus,:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-hover );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-hover )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control.sky-input-box-group-form-control-focus:not(:has(:active)) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-focus );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-focus )}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:has(:active) .sky-form-group{--sky-comp-override-input-box-input-border-color: var( --sky-color-border-action-secondary-active );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-action-toolbar-active )}.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{box-shadow:inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-selected),var(--sky-elevation-action-toolbar-base);--sky-comp-override-input-box-group-background-color: var( --sky-color-background-selected-soft )}.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(:focus-within:not(:active)) .sky-form-group input{color:var(--sky-color-text-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{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-comp-search-space-inset-top) var(--sky-comp-search-space-inset-right) var(--sky-comp-search-space-inset-bottom) 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-deemphasized);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"] }]
|
|
2132
2137
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
2133
2138
|
type: Input
|
|
2134
2139
|
}], ariaLabelledBy: [{
|
|
@@ -2285,12 +2290,6 @@ class SkySelectionModalComponent {
|
|
|
2285
2290
|
this.#changeDetector.markForCheck();
|
|
2286
2291
|
}
|
|
2287
2292
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2288
|
-
itemClick(selectedItem) {
|
|
2289
|
-
if (this.context.selectMode === 'single') {
|
|
2290
|
-
this.onItemSelect(!selectedItem.selected, selectedItem);
|
|
2291
|
-
}
|
|
2292
|
-
}
|
|
2293
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2294
2293
|
addItem(itemToAdd) {
|
|
2295
2294
|
// Add the selected item, then perform the search again in case the
|
|
2296
2295
|
// newly-added item should be displayed as a search results.
|
|
@@ -2424,7 +2423,7 @@ class SkySelectionModalComponent {
|
|
|
2424
2423
|
});
|
|
2425
2424
|
}
|
|
2426
2425
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkySelectionModalComponent, isStandalone: true, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\n [selectable]=\"context.selectMode === 'multiple'\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i6.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2426
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkySelectionModalComponent, isStandalone: true, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [selectionMode]=\"context.selectMode\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i6.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2428
2427
|
}
|
|
2429
2428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2430
2429
|
type: Component,
|
|
@@ -2442,7 +2441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2442
2441
|
SkyToolbarModule,
|
|
2443
2442
|
SkyWaitModule,
|
|
2444
2443
|
SkyViewkeeperModule,
|
|
2445
|
-
], template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [
|
|
2444
|
+
], template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [selectionMode]=\"context.selectMode\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"save()\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"] }]
|
|
2446
2445
|
}], ctorParameters: () => [] });
|
|
2447
2446
|
|
|
2448
2447
|
/**
|
|
@@ -2838,11 +2837,6 @@ class SkyLookupShowMoreModalComponent {
|
|
|
2838
2837
|
await this.updateDataState();
|
|
2839
2838
|
this.#changeDetector.markForCheck();
|
|
2840
2839
|
}
|
|
2841
|
-
itemClick(selectedItem) {
|
|
2842
|
-
if (this.context.selectMode === 'single') {
|
|
2843
|
-
void this.onItemSelect(!selectedItem.selected, selectedItem);
|
|
2844
|
-
}
|
|
2845
|
-
}
|
|
2846
2840
|
onItemSelect(newSelectState, itemToSelect) {
|
|
2847
2841
|
const items = this.items;
|
|
2848
2842
|
if (this.context.selectMode === 'single') {
|
|
@@ -2985,7 +2979,7 @@ class SkyLookupShowMoreModalComponent {
|
|
|
2985
2979
|
});
|
|
2986
2980
|
}
|
|
2987
2981
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [selectable]=\"context.selectMode === 'multiple'\"\n [(isSelected)]=\"item.selected\"\n (click)=\"itemClick(item)\"\n (keyup.enter)=\"itemClick(item)\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i6.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [selectionMode]=\"context.selectMode\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i6.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2989
2983
|
}
|
|
2990
2984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
2991
2985
|
type: Component,
|
|
@@ -3001,7 +2995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
3001
2995
|
SkyThemeModule,
|
|
3002
2996
|
SkyToolbarModule,
|
|
3003
2997
|
SkyViewkeeperModule,
|
|
3004
|
-
], template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater
|
|
2998
|
+
], template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\n <sky-modal-header>\n @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"selectAll()\"\n >\n {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"clearAll()\"\n >\n {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [selectionMode]=\"context.selectMode\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-content>\n <ng-container\n *ngTemplateOutlet=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\n (click)=\"modalInstance.save(selectedItems)\"\n >\n {{ 'skyux_lookup_show_more_select' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n type=\"button\"\n (click)=\"modalInstance.close()\"\n >\n {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n\n<ng-template #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}label.selection-modal-item-label{display:block}\n"] }]
|
|
3005
2999
|
}], ctorParameters: () => [] });
|
|
3006
3000
|
|
|
3007
3001
|
class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|