@skyux/lookup 9.3.0 → 9.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +1928 -1920
- package/esm2022/lib/modules/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2022/lib/modules/country-field/country-field.component.mjs +3 -3
- package/esm2022/lib/modules/lookup/lookup-show-more-modal.component.mjs +3 -3
- package/esm2022/lib/modules/lookup/lookup.component.mjs +3 -3
- package/esm2022/lib/modules/search/search.component.mjs +8 -5
- package/esm2022/lib/modules/selection-modal/selection-modal.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-lookup-resources.module.mjs +2 -1
- package/fesm2022/skyux-lookup.mjs +17 -13
- package/fesm2022/skyux-lookup.mjs.map +1 -1
- package/lib/modules/search/search.component.d.ts +6 -3
- package/package.json +10 -10
|
@@ -5,7 +5,7 @@ import { NgModule, forwardRef, Directive, Input, Pipe, Injectable, EventEmitter,
|
|
|
5
5
|
import * as i4 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, UntypedFormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1 from '@skyux/core';
|
|
8
|
-
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyMediaBreakpoints, SkyIdService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
|
|
8
|
+
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule, SkyNumericModule, SkyContentInfoProvider, SkyMediaBreakpoints, SkyIdService, SkyViewkeeperModule, SkyLogService, SkyAppWindowRef } from '@skyux/core';
|
|
9
9
|
import * as i5 from '@skyux/indicators';
|
|
10
10
|
import { SkyTextHighlightModule, SkyIconModule, SkyWaitModule, SkyTokensMessageType, SkyTokensModule } from '@skyux/indicators';
|
|
11
11
|
import * as i2$1 from '@skyux/theme';
|
|
@@ -55,6 +55,7 @@ const RESOURCES = {
|
|
|
55
55
|
skyux_lookup_show_more_no_results: { message: 'No matches found' },
|
|
56
56
|
skyux_lookup_show_more_select: { message: 'Select' },
|
|
57
57
|
skyux_lookup_tokens_summary: { message: '{0} items selected' },
|
|
58
|
+
skyux_search_aria_label_descriptor: { message: 'Search {0}' },
|
|
58
59
|
skyux_search_dismiss: { message: 'Dismiss search' },
|
|
59
60
|
skyux_search_label: { message: 'Search items' },
|
|
60
61
|
skyux_search_open: { message: 'Open search' },
|
|
@@ -1245,11 +1246,11 @@ class SkyAutocompleteComponent {
|
|
|
1245
1246
|
}
|
|
1246
1247
|
}
|
|
1247
1248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i2.SkyInputBoxHostService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync", openChange: "openChange" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content
|
|
1249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync", openChange: "openChange" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"isResultsVisible | async\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources : (data.length | skyNumeric : { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric : { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:absolute;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1249
1250
|
}
|
|
1250
1251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1251
1252
|
type: Component,
|
|
1252
|
-
args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content
|
|
1253
|
+
args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n \"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-controls]=\"\n isOpen && (showActionsArea || (isResultsVisible | async))\n ? resultsListId\n : null\n \"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content />\n</div>\n\n<ng-template #resultsTemplateRef>\n <!-- We do not want the blur to fire here so that the dropdown does not close. This is why we are preventing the mousedown default. -->\n <div\n class=\"sky-autocomplete-results-container\"\n [attr.id]=\"resultsListId\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"isResultsVisible | async\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (click)=\"onResultClick(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled : searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources : (data.length | skyNumeric : { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric : { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (click)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:absolute;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
|
|
1253
1254
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAffixService }, { type: SkyAutocompleteAdapterService }, { type: i1.SkyOverlayService }, { type: i2.SkyInputBoxHostService, decorators: [{
|
|
1254
1255
|
type: Optional
|
|
1255
1256
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1721,11 +1722,11 @@ class SkyCountryFieldComponent {
|
|
|
1721
1722
|
}
|
|
1722
1723
|
}
|
|
1723
1724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyCountryFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1724
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyCountryFieldComponent, selector: "sky-country-field", inputs: { autocompleteAttribute: "autocompleteAttribute", defaultCountry: "defaultCountry", disabled: "disabled", hideSelectedCountryFlag: "hideSelectedCountryFlag", includePhoneInfo: "includePhoneInfo", supportedCountryISOs: "supportedCountryISOs" }, outputs: { selectedCountryChange: "selectedCountryChange" }, providers: [SKY_COUNTRY_FIELD_VALIDATOR], viewQueries: [{ propertyName: "countrySearchAutocompleteDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name{margin-right:6px}[dir=rtl] .iti__flag-box,[dir=rtl] .iti__country-name{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=text],[dir=rtl] .iti--separate-dial-code input[type=tel]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:12px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cq{height:12px;background-position:-1115px 0px}.iti__flag.iti__cr{height:12px;background-position:-1137px 0px}.iti__flag.iti__cu{height:10px;background-position:-1159px 0px}.iti__flag.iti__cv{height:12px;background-position:-1181px 0px}.iti__flag.iti__cw{height:14px;background-position:-1203px 0px}.iti__flag.iti__cx{height:10px;background-position:-1225px 0px}.iti__flag.iti__cy{height:14px;background-position:-1247px 0px}.iti__flag.iti__cz{height:14px;background-position:-1269px 0px}.iti__flag.iti__de{height:12px;background-position:-1291px 0px}.iti__flag.iti__dg{height:10px;background-position:-1313px 0px}.iti__flag.iti__dj{height:14px;background-position:-1335px 0px}.iti__flag.iti__dk{height:15px;background-position:-1357px 0px}.iti__flag.iti__dm{height:10px;background-position:-1379px 0px}.iti__flag.iti__do{height:14px;background-position:-1401px 0px}.iti__flag.iti__dz{height:14px;background-position:-1423px 0px}.iti__flag.iti__ea{height:14px;background-position:-1445px 0px}.iti__flag.iti__ec{height:14px;background-position:-1467px 0px}.iti__flag.iti__ee{height:13px;background-position:-1489px 0px}.iti__flag.iti__eg{height:14px;background-position:-1511px 0px}.iti__flag.iti__eh{height:10px;background-position:-1533px 0px}.iti__flag.iti__er{height:10px;background-position:-1555px 0px}.iti__flag.iti__es{height:14px;background-position:-1577px 0px}.iti__flag.iti__et{height:10px;background-position:-1599px 0px}.iti__flag.iti__eu{height:14px;background-position:-1621px 0px}.iti__flag.iti__ez{height:14px;background-position:-1643px 0px}.iti__flag.iti__fi{height:12px;background-position:-1665px 0px}.iti__flag.iti__fj{height:10px;background-position:-1687px 0px}.iti__flag.iti__fk{height:10px;background-position:-1709px 0px}.iti__flag.iti__fm{height:11px;background-position:-1731px 0px}.iti__flag.iti__fo{height:15px;background-position:-1753px 0px}.iti__flag.iti__fr{height:14px;background-position:-1775px 0px}.iti__flag.iti__fx{height:14px;background-position:-1797px 0px}.iti__flag.iti__ga{height:15px;background-position:-1819px 0px}.iti__flag.iti__gb{height:10px;background-position:-1841px 0px}.iti__flag.iti__gd{height:12px;background-position:-1863px 0px}.iti__flag.iti__ge{height:14px;background-position:-1885px 0px}.iti__flag.iti__gf{height:14px;background-position:-1907px 0px}.iti__flag.iti__gg{height:14px;background-position:-1929px 0px}.iti__flag.iti__gh{height:14px;background-position:-1951px 0px}.iti__flag.iti__gi{height:10px;background-position:-1973px 0px}.iti__flag.iti__gl{height:14px;background-position:-1995px 0px}.iti__flag.iti__gm{height:14px;background-position:-2017px 0px}.iti__flag.iti__gn{height:14px;background-position:-2039px 0px}.iti__flag.iti__gp{height:14px;background-position:-2061px 0px}.iti__flag.iti__gq{height:14px;background-position:-2083px 0px}.iti__flag.iti__gr{height:14px;background-position:-2105px 0px}.iti__flag.iti__gs{height:10px;background-position:-2127px 0px}.iti__flag.iti__gt{height:13px;background-position:-2149px 0px}.iti__flag.iti__gu{height:11px;background-position:-2171px 0px}.iti__flag.iti__gw{height:10px;background-position:-2193px 0px}.iti__flag.iti__gy{height:12px;background-position:-2215px 0px}.iti__flag.iti__hk{height:14px;background-position:-2237px 0px}.iti__flag.iti__hm{height:10px;background-position:-2259px 0px}.iti__flag.iti__hn{height:10px;background-position:-2281px 0px}.iti__flag.iti__hr{height:10px;background-position:-2303px 0px}.iti__flag.iti__ht{height:12px;background-position:-2325px 0px}.iti__flag.iti__hu{height:10px;background-position:-2347px 0px}.iti__flag.iti__ic{height:14px;background-position:-2369px 0px}.iti__flag.iti__id{height:14px;background-position:-2391px 0px}.iti__flag.iti__ie{height:10px;background-position:-2413px 0px}.iti__flag.iti__il{height:15px;background-position:-2435px 0px}.iti__flag.iti__im{height:10px;background-position:-2457px 0px}.iti__flag.iti__in{height:14px;background-position:-2479px 0px}.iti__flag.iti__io{height:10px;background-position:-2501px 0px}.iti__flag.iti__iq{height:14px;background-position:-2523px 0px}.iti__flag.iti__ir{height:12px;background-position:-2545px 0px}.iti__flag.iti__is{height:15px;background-position:-2567px 0px}.iti__flag.iti__it{height:14px;background-position:-2589px 0px}.iti__flag.iti__je{height:12px;background-position:-2611px 0px}.iti__flag.iti__jm{height:10px;background-position:-2633px 0px}.iti__flag.iti__jo{height:10px;background-position:-2655px 0px}.iti__flag.iti__jp{height:14px;background-position:-2677px 0px}.iti__flag.iti__ke{height:14px;background-position:-2699px 0px}.iti__flag.iti__kg{height:12px;background-position:-2721px 0px}.iti__flag.iti__kh{height:13px;background-position:-2743px 0px}.iti__flag.iti__ki{height:10px;background-position:-2765px 0px}.iti__flag.iti__km{height:12px;background-position:-2787px 0px}.iti__flag.iti__kn{height:14px;background-position:-2809px 0px}.iti__flag.iti__kp{height:10px;background-position:-2831px 0px}.iti__flag.iti__kr{height:14px;background-position:-2853px 0px}.iti__flag.iti__kw{height:10px;background-position:-2875px 0px}.iti__flag.iti__ky{height:10px;background-position:-2897px 0px}.iti__flag.iti__kz{height:10px;background-position:-2919px 0px}.iti__flag.iti__la{height:14px;background-position:-2941px 0px}.iti__flag.iti__lb{height:14px;background-position:-2963px 0px}.iti__flag.iti__lc{height:10px;background-position:-2985px 0px}.iti__flag.iti__li{height:12px;background-position:-3007px 0px}.iti__flag.iti__lk{height:10px;background-position:-3029px 0px}.iti__flag.iti__lr{height:11px;background-position:-3051px 0px}.iti__flag.iti__ls{height:14px;background-position:-3073px 0px}.iti__flag.iti__lt{height:12px;background-position:-3095px 0px}.iti__flag.iti__lu{height:12px;background-position:-3117px 0px}.iti__flag.iti__lv{height:10px;background-position:-3139px 0px}.iti__flag.iti__ly{height:10px;background-position:-3161px 0px}.iti__flag.iti__ma{height:14px;background-position:-3183px 0px}.iti__flag.iti__mc{height:15px;background-position:-3205px 0px}.iti__flag.iti__md{height:10px;background-position:-3226px 0px}.iti__flag.iti__me{height:10px;background-position:-3248px 0px}.iti__flag.iti__mf{height:14px;background-position:-3270px 0px}.iti__flag.iti__mg{height:14px;background-position:-3292px 0px}.iti__flag.iti__mh{height:11px;background-position:-3314px 0px}.iti__flag.iti__mk{height:10px;background-position:-3336px 0px}.iti__flag.iti__ml{height:14px;background-position:-3358px 0px}.iti__flag.iti__mm{height:14px;background-position:-3380px 0px}.iti__flag.iti__mn{height:10px;background-position:-3402px 0px}.iti__flag.iti__mo{height:14px;background-position:-3424px 0px}.iti__flag.iti__mp{height:10px;background-position:-3446px 0px}.iti__flag.iti__mq{height:14px;background-position:-3468px 0px}.iti__flag.iti__mr{height:14px;background-position:-3490px 0px}.iti__flag.iti__ms{height:10px;background-position:-3512px 0px}.iti__flag.iti__mt{height:14px;background-position:-3534px 0px}.iti__flag.iti__mu{height:14px;background-position:-3556px 0px}.iti__flag.iti__mv{height:14px;background-position:-3578px 0px}.iti__flag.iti__mw{height:14px;background-position:-3600px 0px}.iti__flag.iti__mx{height:12px;background-position:-3622px 0px}.iti__flag.iti__my{height:10px;background-position:-3644px 0px}.iti__flag.iti__mz{height:14px;background-position:-3666px 0px}.iti__flag.iti__na{height:14px;background-position:-3688px 0px}.iti__flag.iti__nc{height:10px;background-position:-3710px 0px}.iti__flag.iti__ne{height:15px;background-position:-3732px 0px}.iti__flag.iti__nf{height:10px;background-position:-3752px 0px}.iti__flag.iti__ng{height:10px;background-position:-3774px 0px}.iti__flag.iti__ni{height:12px;background-position:-3796px 0px}.iti__flag.iti__nl{height:14px;background-position:-3818px 0px}.iti__flag.iti__no{height:15px;background-position:-3840px 0px}.iti__flag.iti__np{height:15px;background-position:-3862px 0px}.iti__flag.iti__nr{height:10px;background-position:-3877px 0px}.iti__flag.iti__nu{height:10px;background-position:-3899px 0px}.iti__flag.iti__nz{height:10px;background-position:-3921px 0px}.iti__flag.iti__om{height:10px;background-position:-3943px 0px}.iti__flag.iti__pa{height:14px;background-position:-3965px 0px}.iti__flag.iti__pe{height:14px;background-position:-3987px 0px}.iti__flag.iti__pf{height:14px;background-position:-4009px 0px}.iti__flag.iti__pg{height:15px;background-position:-4031px 0px}.iti__flag.iti__ph{height:10px;background-position:-4053px 0px}.iti__flag.iti__pk{height:14px;background-position:-4075px 0px}.iti__flag.iti__pl{height:13px;background-position:-4097px 0px}.iti__flag.iti__pm{height:14px;background-position:-4119px 0px}.iti__flag.iti__pn{height:10px;background-position:-4141px 0px}.iti__flag.iti__pr{height:14px;background-position:-4163px 0px}.iti__flag.iti__ps{height:10px;background-position:-4185px 0px}.iti__flag.iti__pt{height:14px;background-position:-4207px 0px}.iti__flag.iti__pw{height:13px;background-position:-4229px 0px}.iti__flag.iti__py{height:11px;background-position:-4251px 0px}.iti__flag.iti__qa{height:8px;background-position:-4273px 0px}.iti__flag.iti__re{height:14px;background-position:-4295px 0px}.iti__flag.iti__ro{height:14px;background-position:-4317px 0px}.iti__flag.iti__rs{height:14px;background-position:-4339px 0px}.iti__flag.iti__ru{height:14px;background-position:-4361px 0px}.iti__flag.iti__rw{height:14px;background-position:-4383px 0px}.iti__flag.iti__sa{height:14px;background-position:-4405px 0px}.iti__flag.iti__sb{height:10px;background-position:-4427px 0px}.iti__flag.iti__sc{height:10px;background-position:-4449px 0px}.iti__flag.iti__sd{height:10px;background-position:-4471px 0px}.iti__flag.iti__se{height:13px;background-position:-4493px 0px}.iti__flag.iti__sg{height:14px;background-position:-4515px 0px}.iti__flag.iti__sh{height:10px;background-position:-4537px 0px}.iti__flag.iti__si{height:10px;background-position:-4559px 0px}.iti__flag.iti__sj{height:15px;background-position:-4581px 0px}.iti__flag.iti__sk{height:14px;background-position:-4603px 0px}.iti__flag.iti__sl{height:14px;background-position:-4625px 0px}.iti__flag.iti__sm{height:15px;background-position:-4647px 0px}.iti__flag.iti__sn{height:14px;background-position:-4669px 0px}.iti__flag.iti__so{height:14px;background-position:-4691px 0px}.iti__flag.iti__sr{height:14px;background-position:-4713px 0px}.iti__flag.iti__ss{height:10px;background-position:-4735px 0px}.iti__flag.iti__st{height:10px;background-position:-4757px 0px}.iti__flag.iti__su{height:10px;background-position:-4779px 0px}.iti__flag.iti__sv{height:12px;background-position:-4801px 0px}.iti__flag.iti__sx{height:14px;background-position:-4823px 0px}.iti__flag.iti__sy{height:14px;background-position:-4845px 0px}.iti__flag.iti__sz{height:14px;background-position:-4867px 0px}.iti__flag.iti__ta{height:10px;background-position:-4889px 0px}.iti__flag.iti__tc{height:10px;background-position:-4911px 0px}.iti__flag.iti__td{height:14px;background-position:-4933px 0px}.iti__flag.iti__tf{height:14px;background-position:-4955px 0px}.iti__flag.iti__tg{height:13px;background-position:-4977px 0px}.iti__flag.iti__th{height:14px;background-position:-4999px 0px}.iti__flag.iti__tj{height:10px;background-position:-5021px 0px}.iti__flag.iti__tk{height:10px;background-position:-5043px 0px}.iti__flag.iti__tl{height:10px;background-position:-5065px 0px}.iti__flag.iti__tm{height:14px;background-position:-5087px 0px}.iti__flag.iti__tn{height:14px;background-position:-5109px 0px}.iti__flag.iti__to{height:10px;background-position:-5131px 0px}.iti__flag.iti__tr{height:14px;background-position:-5153px 0px}.iti__flag.iti__tt{height:12px;background-position:-5175px 0px}.iti__flag.iti__tv{height:10px;background-position:-5197px 0px}.iti__flag.iti__tw{height:14px;background-position:-5219px 0px}.iti__flag.iti__tz{height:14px;background-position:-5241px 0px}.iti__flag.iti__ua{height:14px;background-position:-5263px 0px}.iti__flag.iti__ug{height:14px;background-position:-5285px 0px}.iti__flag.iti__uk{height:10px;background-position:-5307px 0px}.iti__flag.iti__um{height:11px;background-position:-5329px 0px}.iti__flag.iti__un{height:14px;background-position:-5351px 0px}.iti__flag.iti__us{height:11px;background-position:-5373px 0px}.iti__flag.iti__uy{height:14px;background-position:-5395px 0px}.iti__flag.iti__uz{height:10px;background-position:-5417px 0px}.iti__flag.iti__va{height:15px;background-position:-5439px 0px}.iti__flag.iti__vc{height:14px;background-position:-5456px 0px}.iti__flag.iti__ve{height:14px;background-position:-5478px 0px}.iti__flag.iti__vg{height:10px;background-position:-5500px 0px}.iti__flag.iti__vi{height:14px;background-position:-5522px 0px}.iti__flag.iti__vn{height:14px;background-position:-5544px 0px}.iti__flag.iti__vu{height:12px;background-position:-5566px 0px}.iti__flag.iti__wf{height:14px;background-position:-5588px 0px}.iti__flag.iti__ws{height:10px;background-position:-5610px 0px}.iti__flag.iti__xk{height:15px;background-position:-5632px 0px}.iti__flag.iti__ye{height:14px;background-position:-5654px 0px}.iti__flag.iti__yt{height:14px;background-position:-5676px 0px}.iti__flag.iti__za{height:14px;background-position:-5698px 0px}.iti__flag.iti__zm{height:14px;background-position:-5720px 0px}.iti__flag.iti__zw{height:10px;background-position:-5742px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyCountryFieldComponent, selector: "sky-country-field", inputs: { autocompleteAttribute: "autocompleteAttribute", defaultCountry: "defaultCountry", disabled: "disabled", hideSelectedCountryFlag: "hideSelectedCountryFlag", includePhoneInfo: "includePhoneInfo", supportedCountryISOs: "supportedCountryISOs" }, outputs: { selectedCountryChange: "selectedCountryChange" }, providers: [SKY_COUNTRY_FIELD_VALIDATOR], viewQueries: [{ propertyName: "countrySearchAutocompleteDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon icon=\"search\" />\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name{margin-right:6px}[dir=rtl] .iti__flag-box,[dir=rtl] .iti__country-name{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=text],[dir=rtl] .iti--separate-dial-code input[type=tel]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:12px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cq{height:12px;background-position:-1115px 0px}.iti__flag.iti__cr{height:12px;background-position:-1137px 0px}.iti__flag.iti__cu{height:10px;background-position:-1159px 0px}.iti__flag.iti__cv{height:12px;background-position:-1181px 0px}.iti__flag.iti__cw{height:14px;background-position:-1203px 0px}.iti__flag.iti__cx{height:10px;background-position:-1225px 0px}.iti__flag.iti__cy{height:14px;background-position:-1247px 0px}.iti__flag.iti__cz{height:14px;background-position:-1269px 0px}.iti__flag.iti__de{height:12px;background-position:-1291px 0px}.iti__flag.iti__dg{height:10px;background-position:-1313px 0px}.iti__flag.iti__dj{height:14px;background-position:-1335px 0px}.iti__flag.iti__dk{height:15px;background-position:-1357px 0px}.iti__flag.iti__dm{height:10px;background-position:-1379px 0px}.iti__flag.iti__do{height:14px;background-position:-1401px 0px}.iti__flag.iti__dz{height:14px;background-position:-1423px 0px}.iti__flag.iti__ea{height:14px;background-position:-1445px 0px}.iti__flag.iti__ec{height:14px;background-position:-1467px 0px}.iti__flag.iti__ee{height:13px;background-position:-1489px 0px}.iti__flag.iti__eg{height:14px;background-position:-1511px 0px}.iti__flag.iti__eh{height:10px;background-position:-1533px 0px}.iti__flag.iti__er{height:10px;background-position:-1555px 0px}.iti__flag.iti__es{height:14px;background-position:-1577px 0px}.iti__flag.iti__et{height:10px;background-position:-1599px 0px}.iti__flag.iti__eu{height:14px;background-position:-1621px 0px}.iti__flag.iti__ez{height:14px;background-position:-1643px 0px}.iti__flag.iti__fi{height:12px;background-position:-1665px 0px}.iti__flag.iti__fj{height:10px;background-position:-1687px 0px}.iti__flag.iti__fk{height:10px;background-position:-1709px 0px}.iti__flag.iti__fm{height:11px;background-position:-1731px 0px}.iti__flag.iti__fo{height:15px;background-position:-1753px 0px}.iti__flag.iti__fr{height:14px;background-position:-1775px 0px}.iti__flag.iti__fx{height:14px;background-position:-1797px 0px}.iti__flag.iti__ga{height:15px;background-position:-1819px 0px}.iti__flag.iti__gb{height:10px;background-position:-1841px 0px}.iti__flag.iti__gd{height:12px;background-position:-1863px 0px}.iti__flag.iti__ge{height:14px;background-position:-1885px 0px}.iti__flag.iti__gf{height:14px;background-position:-1907px 0px}.iti__flag.iti__gg{height:14px;background-position:-1929px 0px}.iti__flag.iti__gh{height:14px;background-position:-1951px 0px}.iti__flag.iti__gi{height:10px;background-position:-1973px 0px}.iti__flag.iti__gl{height:14px;background-position:-1995px 0px}.iti__flag.iti__gm{height:14px;background-position:-2017px 0px}.iti__flag.iti__gn{height:14px;background-position:-2039px 0px}.iti__flag.iti__gp{height:14px;background-position:-2061px 0px}.iti__flag.iti__gq{height:14px;background-position:-2083px 0px}.iti__flag.iti__gr{height:14px;background-position:-2105px 0px}.iti__flag.iti__gs{height:10px;background-position:-2127px 0px}.iti__flag.iti__gt{height:13px;background-position:-2149px 0px}.iti__flag.iti__gu{height:11px;background-position:-2171px 0px}.iti__flag.iti__gw{height:10px;background-position:-2193px 0px}.iti__flag.iti__gy{height:12px;background-position:-2215px 0px}.iti__flag.iti__hk{height:14px;background-position:-2237px 0px}.iti__flag.iti__hm{height:10px;background-position:-2259px 0px}.iti__flag.iti__hn{height:10px;background-position:-2281px 0px}.iti__flag.iti__hr{height:10px;background-position:-2303px 0px}.iti__flag.iti__ht{height:12px;background-position:-2325px 0px}.iti__flag.iti__hu{height:10px;background-position:-2347px 0px}.iti__flag.iti__ic{height:14px;background-position:-2369px 0px}.iti__flag.iti__id{height:14px;background-position:-2391px 0px}.iti__flag.iti__ie{height:10px;background-position:-2413px 0px}.iti__flag.iti__il{height:15px;background-position:-2435px 0px}.iti__flag.iti__im{height:10px;background-position:-2457px 0px}.iti__flag.iti__in{height:14px;background-position:-2479px 0px}.iti__flag.iti__io{height:10px;background-position:-2501px 0px}.iti__flag.iti__iq{height:14px;background-position:-2523px 0px}.iti__flag.iti__ir{height:12px;background-position:-2545px 0px}.iti__flag.iti__is{height:15px;background-position:-2567px 0px}.iti__flag.iti__it{height:14px;background-position:-2589px 0px}.iti__flag.iti__je{height:12px;background-position:-2611px 0px}.iti__flag.iti__jm{height:10px;background-position:-2633px 0px}.iti__flag.iti__jo{height:10px;background-position:-2655px 0px}.iti__flag.iti__jp{height:14px;background-position:-2677px 0px}.iti__flag.iti__ke{height:14px;background-position:-2699px 0px}.iti__flag.iti__kg{height:12px;background-position:-2721px 0px}.iti__flag.iti__kh{height:13px;background-position:-2743px 0px}.iti__flag.iti__ki{height:10px;background-position:-2765px 0px}.iti__flag.iti__km{height:12px;background-position:-2787px 0px}.iti__flag.iti__kn{height:14px;background-position:-2809px 0px}.iti__flag.iti__kp{height:10px;background-position:-2831px 0px}.iti__flag.iti__kr{height:14px;background-position:-2853px 0px}.iti__flag.iti__kw{height:10px;background-position:-2875px 0px}.iti__flag.iti__ky{height:10px;background-position:-2897px 0px}.iti__flag.iti__kz{height:10px;background-position:-2919px 0px}.iti__flag.iti__la{height:14px;background-position:-2941px 0px}.iti__flag.iti__lb{height:14px;background-position:-2963px 0px}.iti__flag.iti__lc{height:10px;background-position:-2985px 0px}.iti__flag.iti__li{height:12px;background-position:-3007px 0px}.iti__flag.iti__lk{height:10px;background-position:-3029px 0px}.iti__flag.iti__lr{height:11px;background-position:-3051px 0px}.iti__flag.iti__ls{height:14px;background-position:-3073px 0px}.iti__flag.iti__lt{height:12px;background-position:-3095px 0px}.iti__flag.iti__lu{height:12px;background-position:-3117px 0px}.iti__flag.iti__lv{height:10px;background-position:-3139px 0px}.iti__flag.iti__ly{height:10px;background-position:-3161px 0px}.iti__flag.iti__ma{height:14px;background-position:-3183px 0px}.iti__flag.iti__mc{height:15px;background-position:-3205px 0px}.iti__flag.iti__md{height:10px;background-position:-3226px 0px}.iti__flag.iti__me{height:10px;background-position:-3248px 0px}.iti__flag.iti__mf{height:14px;background-position:-3270px 0px}.iti__flag.iti__mg{height:14px;background-position:-3292px 0px}.iti__flag.iti__mh{height:11px;background-position:-3314px 0px}.iti__flag.iti__mk{height:10px;background-position:-3336px 0px}.iti__flag.iti__ml{height:14px;background-position:-3358px 0px}.iti__flag.iti__mm{height:14px;background-position:-3380px 0px}.iti__flag.iti__mn{height:10px;background-position:-3402px 0px}.iti__flag.iti__mo{height:14px;background-position:-3424px 0px}.iti__flag.iti__mp{height:10px;background-position:-3446px 0px}.iti__flag.iti__mq{height:14px;background-position:-3468px 0px}.iti__flag.iti__mr{height:14px;background-position:-3490px 0px}.iti__flag.iti__ms{height:10px;background-position:-3512px 0px}.iti__flag.iti__mt{height:14px;background-position:-3534px 0px}.iti__flag.iti__mu{height:14px;background-position:-3556px 0px}.iti__flag.iti__mv{height:14px;background-position:-3578px 0px}.iti__flag.iti__mw{height:14px;background-position:-3600px 0px}.iti__flag.iti__mx{height:12px;background-position:-3622px 0px}.iti__flag.iti__my{height:10px;background-position:-3644px 0px}.iti__flag.iti__mz{height:14px;background-position:-3666px 0px}.iti__flag.iti__na{height:14px;background-position:-3688px 0px}.iti__flag.iti__nc{height:10px;background-position:-3710px 0px}.iti__flag.iti__ne{height:15px;background-position:-3732px 0px}.iti__flag.iti__nf{height:10px;background-position:-3752px 0px}.iti__flag.iti__ng{height:10px;background-position:-3774px 0px}.iti__flag.iti__ni{height:12px;background-position:-3796px 0px}.iti__flag.iti__nl{height:14px;background-position:-3818px 0px}.iti__flag.iti__no{height:15px;background-position:-3840px 0px}.iti__flag.iti__np{height:15px;background-position:-3862px 0px}.iti__flag.iti__nr{height:10px;background-position:-3877px 0px}.iti__flag.iti__nu{height:10px;background-position:-3899px 0px}.iti__flag.iti__nz{height:10px;background-position:-3921px 0px}.iti__flag.iti__om{height:10px;background-position:-3943px 0px}.iti__flag.iti__pa{height:14px;background-position:-3965px 0px}.iti__flag.iti__pe{height:14px;background-position:-3987px 0px}.iti__flag.iti__pf{height:14px;background-position:-4009px 0px}.iti__flag.iti__pg{height:15px;background-position:-4031px 0px}.iti__flag.iti__ph{height:10px;background-position:-4053px 0px}.iti__flag.iti__pk{height:14px;background-position:-4075px 0px}.iti__flag.iti__pl{height:13px;background-position:-4097px 0px}.iti__flag.iti__pm{height:14px;background-position:-4119px 0px}.iti__flag.iti__pn{height:10px;background-position:-4141px 0px}.iti__flag.iti__pr{height:14px;background-position:-4163px 0px}.iti__flag.iti__ps{height:10px;background-position:-4185px 0px}.iti__flag.iti__pt{height:14px;background-position:-4207px 0px}.iti__flag.iti__pw{height:13px;background-position:-4229px 0px}.iti__flag.iti__py{height:11px;background-position:-4251px 0px}.iti__flag.iti__qa{height:8px;background-position:-4273px 0px}.iti__flag.iti__re{height:14px;background-position:-4295px 0px}.iti__flag.iti__ro{height:14px;background-position:-4317px 0px}.iti__flag.iti__rs{height:14px;background-position:-4339px 0px}.iti__flag.iti__ru{height:14px;background-position:-4361px 0px}.iti__flag.iti__rw{height:14px;background-position:-4383px 0px}.iti__flag.iti__sa{height:14px;background-position:-4405px 0px}.iti__flag.iti__sb{height:10px;background-position:-4427px 0px}.iti__flag.iti__sc{height:10px;background-position:-4449px 0px}.iti__flag.iti__sd{height:10px;background-position:-4471px 0px}.iti__flag.iti__se{height:13px;background-position:-4493px 0px}.iti__flag.iti__sg{height:14px;background-position:-4515px 0px}.iti__flag.iti__sh{height:10px;background-position:-4537px 0px}.iti__flag.iti__si{height:10px;background-position:-4559px 0px}.iti__flag.iti__sj{height:15px;background-position:-4581px 0px}.iti__flag.iti__sk{height:14px;background-position:-4603px 0px}.iti__flag.iti__sl{height:14px;background-position:-4625px 0px}.iti__flag.iti__sm{height:15px;background-position:-4647px 0px}.iti__flag.iti__sn{height:14px;background-position:-4669px 0px}.iti__flag.iti__so{height:14px;background-position:-4691px 0px}.iti__flag.iti__sr{height:14px;background-position:-4713px 0px}.iti__flag.iti__ss{height:10px;background-position:-4735px 0px}.iti__flag.iti__st{height:10px;background-position:-4757px 0px}.iti__flag.iti__su{height:10px;background-position:-4779px 0px}.iti__flag.iti__sv{height:12px;background-position:-4801px 0px}.iti__flag.iti__sx{height:14px;background-position:-4823px 0px}.iti__flag.iti__sy{height:14px;background-position:-4845px 0px}.iti__flag.iti__sz{height:14px;background-position:-4867px 0px}.iti__flag.iti__ta{height:10px;background-position:-4889px 0px}.iti__flag.iti__tc{height:10px;background-position:-4911px 0px}.iti__flag.iti__td{height:14px;background-position:-4933px 0px}.iti__flag.iti__tf{height:14px;background-position:-4955px 0px}.iti__flag.iti__tg{height:13px;background-position:-4977px 0px}.iti__flag.iti__th{height:14px;background-position:-4999px 0px}.iti__flag.iti__tj{height:10px;background-position:-5021px 0px}.iti__flag.iti__tk{height:10px;background-position:-5043px 0px}.iti__flag.iti__tl{height:10px;background-position:-5065px 0px}.iti__flag.iti__tm{height:14px;background-position:-5087px 0px}.iti__flag.iti__tn{height:14px;background-position:-5109px 0px}.iti__flag.iti__to{height:10px;background-position:-5131px 0px}.iti__flag.iti__tr{height:14px;background-position:-5153px 0px}.iti__flag.iti__tt{height:12px;background-position:-5175px 0px}.iti__flag.iti__tv{height:10px;background-position:-5197px 0px}.iti__flag.iti__tw{height:14px;background-position:-5219px 0px}.iti__flag.iti__tz{height:14px;background-position:-5241px 0px}.iti__flag.iti__ua{height:14px;background-position:-5263px 0px}.iti__flag.iti__ug{height:14px;background-position:-5285px 0px}.iti__flag.iti__uk{height:10px;background-position:-5307px 0px}.iti__flag.iti__um{height:11px;background-position:-5329px 0px}.iti__flag.iti__un{height:14px;background-position:-5351px 0px}.iti__flag.iti__us{height:11px;background-position:-5373px 0px}.iti__flag.iti__uy{height:14px;background-position:-5395px 0px}.iti__flag.iti__uz{height:10px;background-position:-5417px 0px}.iti__flag.iti__va{height:15px;background-position:-5439px 0px}.iti__flag.iti__vc{height:14px;background-position:-5456px 0px}.iti__flag.iti__ve{height:14px;background-position:-5478px 0px}.iti__flag.iti__vg{height:10px;background-position:-5500px 0px}.iti__flag.iti__vi{height:14px;background-position:-5522px 0px}.iti__flag.iti__vn{height:14px;background-position:-5544px 0px}.iti__flag.iti__vu{height:12px;background-position:-5566px 0px}.iti__flag.iti__wf{height:14px;background-position:-5588px 0px}.iti__flag.iti__ws{height:10px;background-position:-5610px 0px}.iti__flag.iti__xk{height:15px;background-position:-5632px 0px}.iti__flag.iti__ye{height:14px;background-position:-5654px 0px}.iti__flag.iti__yt{height:14px;background-position:-5676px 0px}.iti__flag.iti__za{height:14px;background-position:-5698px 0px}.iti__flag.iti__zm{height:14px;background-position:-5720px 0px}.iti__flag.iti__zw{height:10px;background-position:-5742px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1725
1726
|
}
|
|
1726
1727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyCountryFieldComponent, decorators: [{
|
|
1727
1728
|
type: Component,
|
|
1728
|
-
args: [{ selector: 'sky-country-field', providers: [SKY_COUNTRY_FIELD_VALIDATOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name{margin-right:6px}[dir=rtl] .iti__flag-box,[dir=rtl] .iti__country-name{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=text],[dir=rtl] .iti--separate-dial-code input[type=tel]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:12px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cq{height:12px;background-position:-1115px 0px}.iti__flag.iti__cr{height:12px;background-position:-1137px 0px}.iti__flag.iti__cu{height:10px;background-position:-1159px 0px}.iti__flag.iti__cv{height:12px;background-position:-1181px 0px}.iti__flag.iti__cw{height:14px;background-position:-1203px 0px}.iti__flag.iti__cx{height:10px;background-position:-1225px 0px}.iti__flag.iti__cy{height:14px;background-position:-1247px 0px}.iti__flag.iti__cz{height:14px;background-position:-1269px 0px}.iti__flag.iti__de{height:12px;background-position:-1291px 0px}.iti__flag.iti__dg{height:10px;background-position:-1313px 0px}.iti__flag.iti__dj{height:14px;background-position:-1335px 0px}.iti__flag.iti__dk{height:15px;background-position:-1357px 0px}.iti__flag.iti__dm{height:10px;background-position:-1379px 0px}.iti__flag.iti__do{height:14px;background-position:-1401px 0px}.iti__flag.iti__dz{height:14px;background-position:-1423px 0px}.iti__flag.iti__ea{height:14px;background-position:-1445px 0px}.iti__flag.iti__ec{height:14px;background-position:-1467px 0px}.iti__flag.iti__ee{height:13px;background-position:-1489px 0px}.iti__flag.iti__eg{height:14px;background-position:-1511px 0px}.iti__flag.iti__eh{height:10px;background-position:-1533px 0px}.iti__flag.iti__er{height:10px;background-position:-1555px 0px}.iti__flag.iti__es{height:14px;background-position:-1577px 0px}.iti__flag.iti__et{height:10px;background-position:-1599px 0px}.iti__flag.iti__eu{height:14px;background-position:-1621px 0px}.iti__flag.iti__ez{height:14px;background-position:-1643px 0px}.iti__flag.iti__fi{height:12px;background-position:-1665px 0px}.iti__flag.iti__fj{height:10px;background-position:-1687px 0px}.iti__flag.iti__fk{height:10px;background-position:-1709px 0px}.iti__flag.iti__fm{height:11px;background-position:-1731px 0px}.iti__flag.iti__fo{height:15px;background-position:-1753px 0px}.iti__flag.iti__fr{height:14px;background-position:-1775px 0px}.iti__flag.iti__fx{height:14px;background-position:-1797px 0px}.iti__flag.iti__ga{height:15px;background-position:-1819px 0px}.iti__flag.iti__gb{height:10px;background-position:-1841px 0px}.iti__flag.iti__gd{height:12px;background-position:-1863px 0px}.iti__flag.iti__ge{height:14px;background-position:-1885px 0px}.iti__flag.iti__gf{height:14px;background-position:-1907px 0px}.iti__flag.iti__gg{height:14px;background-position:-1929px 0px}.iti__flag.iti__gh{height:14px;background-position:-1951px 0px}.iti__flag.iti__gi{height:10px;background-position:-1973px 0px}.iti__flag.iti__gl{height:14px;background-position:-1995px 0px}.iti__flag.iti__gm{height:14px;background-position:-2017px 0px}.iti__flag.iti__gn{height:14px;background-position:-2039px 0px}.iti__flag.iti__gp{height:14px;background-position:-2061px 0px}.iti__flag.iti__gq{height:14px;background-position:-2083px 0px}.iti__flag.iti__gr{height:14px;background-position:-2105px 0px}.iti__flag.iti__gs{height:10px;background-position:-2127px 0px}.iti__flag.iti__gt{height:13px;background-position:-2149px 0px}.iti__flag.iti__gu{height:11px;background-position:-2171px 0px}.iti__flag.iti__gw{height:10px;background-position:-2193px 0px}.iti__flag.iti__gy{height:12px;background-position:-2215px 0px}.iti__flag.iti__hk{height:14px;background-position:-2237px 0px}.iti__flag.iti__hm{height:10px;background-position:-2259px 0px}.iti__flag.iti__hn{height:10px;background-position:-2281px 0px}.iti__flag.iti__hr{height:10px;background-position:-2303px 0px}.iti__flag.iti__ht{height:12px;background-position:-2325px 0px}.iti__flag.iti__hu{height:10px;background-position:-2347px 0px}.iti__flag.iti__ic{height:14px;background-position:-2369px 0px}.iti__flag.iti__id{height:14px;background-position:-2391px 0px}.iti__flag.iti__ie{height:10px;background-position:-2413px 0px}.iti__flag.iti__il{height:15px;background-position:-2435px 0px}.iti__flag.iti__im{height:10px;background-position:-2457px 0px}.iti__flag.iti__in{height:14px;background-position:-2479px 0px}.iti__flag.iti__io{height:10px;background-position:-2501px 0px}.iti__flag.iti__iq{height:14px;background-position:-2523px 0px}.iti__flag.iti__ir{height:12px;background-position:-2545px 0px}.iti__flag.iti__is{height:15px;background-position:-2567px 0px}.iti__flag.iti__it{height:14px;background-position:-2589px 0px}.iti__flag.iti__je{height:12px;background-position:-2611px 0px}.iti__flag.iti__jm{height:10px;background-position:-2633px 0px}.iti__flag.iti__jo{height:10px;background-position:-2655px 0px}.iti__flag.iti__jp{height:14px;background-position:-2677px 0px}.iti__flag.iti__ke{height:14px;background-position:-2699px 0px}.iti__flag.iti__kg{height:12px;background-position:-2721px 0px}.iti__flag.iti__kh{height:13px;background-position:-2743px 0px}.iti__flag.iti__ki{height:10px;background-position:-2765px 0px}.iti__flag.iti__km{height:12px;background-position:-2787px 0px}.iti__flag.iti__kn{height:14px;background-position:-2809px 0px}.iti__flag.iti__kp{height:10px;background-position:-2831px 0px}.iti__flag.iti__kr{height:14px;background-position:-2853px 0px}.iti__flag.iti__kw{height:10px;background-position:-2875px 0px}.iti__flag.iti__ky{height:10px;background-position:-2897px 0px}.iti__flag.iti__kz{height:10px;background-position:-2919px 0px}.iti__flag.iti__la{height:14px;background-position:-2941px 0px}.iti__flag.iti__lb{height:14px;background-position:-2963px 0px}.iti__flag.iti__lc{height:10px;background-position:-2985px 0px}.iti__flag.iti__li{height:12px;background-position:-3007px 0px}.iti__flag.iti__lk{height:10px;background-position:-3029px 0px}.iti__flag.iti__lr{height:11px;background-position:-3051px 0px}.iti__flag.iti__ls{height:14px;background-position:-3073px 0px}.iti__flag.iti__lt{height:12px;background-position:-3095px 0px}.iti__flag.iti__lu{height:12px;background-position:-3117px 0px}.iti__flag.iti__lv{height:10px;background-position:-3139px 0px}.iti__flag.iti__ly{height:10px;background-position:-3161px 0px}.iti__flag.iti__ma{height:14px;background-position:-3183px 0px}.iti__flag.iti__mc{height:15px;background-position:-3205px 0px}.iti__flag.iti__md{height:10px;background-position:-3226px 0px}.iti__flag.iti__me{height:10px;background-position:-3248px 0px}.iti__flag.iti__mf{height:14px;background-position:-3270px 0px}.iti__flag.iti__mg{height:14px;background-position:-3292px 0px}.iti__flag.iti__mh{height:11px;background-position:-3314px 0px}.iti__flag.iti__mk{height:10px;background-position:-3336px 0px}.iti__flag.iti__ml{height:14px;background-position:-3358px 0px}.iti__flag.iti__mm{height:14px;background-position:-3380px 0px}.iti__flag.iti__mn{height:10px;background-position:-3402px 0px}.iti__flag.iti__mo{height:14px;background-position:-3424px 0px}.iti__flag.iti__mp{height:10px;background-position:-3446px 0px}.iti__flag.iti__mq{height:14px;background-position:-3468px 0px}.iti__flag.iti__mr{height:14px;background-position:-3490px 0px}.iti__flag.iti__ms{height:10px;background-position:-3512px 0px}.iti__flag.iti__mt{height:14px;background-position:-3534px 0px}.iti__flag.iti__mu{height:14px;background-position:-3556px 0px}.iti__flag.iti__mv{height:14px;background-position:-3578px 0px}.iti__flag.iti__mw{height:14px;background-position:-3600px 0px}.iti__flag.iti__mx{height:12px;background-position:-3622px 0px}.iti__flag.iti__my{height:10px;background-position:-3644px 0px}.iti__flag.iti__mz{height:14px;background-position:-3666px 0px}.iti__flag.iti__na{height:14px;background-position:-3688px 0px}.iti__flag.iti__nc{height:10px;background-position:-3710px 0px}.iti__flag.iti__ne{height:15px;background-position:-3732px 0px}.iti__flag.iti__nf{height:10px;background-position:-3752px 0px}.iti__flag.iti__ng{height:10px;background-position:-3774px 0px}.iti__flag.iti__ni{height:12px;background-position:-3796px 0px}.iti__flag.iti__nl{height:14px;background-position:-3818px 0px}.iti__flag.iti__no{height:15px;background-position:-3840px 0px}.iti__flag.iti__np{height:15px;background-position:-3862px 0px}.iti__flag.iti__nr{height:10px;background-position:-3877px 0px}.iti__flag.iti__nu{height:10px;background-position:-3899px 0px}.iti__flag.iti__nz{height:10px;background-position:-3921px 0px}.iti__flag.iti__om{height:10px;background-position:-3943px 0px}.iti__flag.iti__pa{height:14px;background-position:-3965px 0px}.iti__flag.iti__pe{height:14px;background-position:-3987px 0px}.iti__flag.iti__pf{height:14px;background-position:-4009px 0px}.iti__flag.iti__pg{height:15px;background-position:-4031px 0px}.iti__flag.iti__ph{height:10px;background-position:-4053px 0px}.iti__flag.iti__pk{height:14px;background-position:-4075px 0px}.iti__flag.iti__pl{height:13px;background-position:-4097px 0px}.iti__flag.iti__pm{height:14px;background-position:-4119px 0px}.iti__flag.iti__pn{height:10px;background-position:-4141px 0px}.iti__flag.iti__pr{height:14px;background-position:-4163px 0px}.iti__flag.iti__ps{height:10px;background-position:-4185px 0px}.iti__flag.iti__pt{height:14px;background-position:-4207px 0px}.iti__flag.iti__pw{height:13px;background-position:-4229px 0px}.iti__flag.iti__py{height:11px;background-position:-4251px 0px}.iti__flag.iti__qa{height:8px;background-position:-4273px 0px}.iti__flag.iti__re{height:14px;background-position:-4295px 0px}.iti__flag.iti__ro{height:14px;background-position:-4317px 0px}.iti__flag.iti__rs{height:14px;background-position:-4339px 0px}.iti__flag.iti__ru{height:14px;background-position:-4361px 0px}.iti__flag.iti__rw{height:14px;background-position:-4383px 0px}.iti__flag.iti__sa{height:14px;background-position:-4405px 0px}.iti__flag.iti__sb{height:10px;background-position:-4427px 0px}.iti__flag.iti__sc{height:10px;background-position:-4449px 0px}.iti__flag.iti__sd{height:10px;background-position:-4471px 0px}.iti__flag.iti__se{height:13px;background-position:-4493px 0px}.iti__flag.iti__sg{height:14px;background-position:-4515px 0px}.iti__flag.iti__sh{height:10px;background-position:-4537px 0px}.iti__flag.iti__si{height:10px;background-position:-4559px 0px}.iti__flag.iti__sj{height:15px;background-position:-4581px 0px}.iti__flag.iti__sk{height:14px;background-position:-4603px 0px}.iti__flag.iti__sl{height:14px;background-position:-4625px 0px}.iti__flag.iti__sm{height:15px;background-position:-4647px 0px}.iti__flag.iti__sn{height:14px;background-position:-4669px 0px}.iti__flag.iti__so{height:14px;background-position:-4691px 0px}.iti__flag.iti__sr{height:14px;background-position:-4713px 0px}.iti__flag.iti__ss{height:10px;background-position:-4735px 0px}.iti__flag.iti__st{height:10px;background-position:-4757px 0px}.iti__flag.iti__su{height:10px;background-position:-4779px 0px}.iti__flag.iti__sv{height:12px;background-position:-4801px 0px}.iti__flag.iti__sx{height:14px;background-position:-4823px 0px}.iti__flag.iti__sy{height:14px;background-position:-4845px 0px}.iti__flag.iti__sz{height:14px;background-position:-4867px 0px}.iti__flag.iti__ta{height:10px;background-position:-4889px 0px}.iti__flag.iti__tc{height:10px;background-position:-4911px 0px}.iti__flag.iti__td{height:14px;background-position:-4933px 0px}.iti__flag.iti__tf{height:14px;background-position:-4955px 0px}.iti__flag.iti__tg{height:13px;background-position:-4977px 0px}.iti__flag.iti__th{height:14px;background-position:-4999px 0px}.iti__flag.iti__tj{height:10px;background-position:-5021px 0px}.iti__flag.iti__tk{height:10px;background-position:-5043px 0px}.iti__flag.iti__tl{height:10px;background-position:-5065px 0px}.iti__flag.iti__tm{height:14px;background-position:-5087px 0px}.iti__flag.iti__tn{height:14px;background-position:-5109px 0px}.iti__flag.iti__to{height:10px;background-position:-5131px 0px}.iti__flag.iti__tr{height:14px;background-position:-5153px 0px}.iti__flag.iti__tt{height:12px;background-position:-5175px 0px}.iti__flag.iti__tv{height:10px;background-position:-5197px 0px}.iti__flag.iti__tw{height:14px;background-position:-5219px 0px}.iti__flag.iti__tz{height:14px;background-position:-5241px 0px}.iti__flag.iti__ua{height:14px;background-position:-5263px 0px}.iti__flag.iti__ug{height:14px;background-position:-5285px 0px}.iti__flag.iti__uk{height:10px;background-position:-5307px 0px}.iti__flag.iti__um{height:11px;background-position:-5329px 0px}.iti__flag.iti__un{height:14px;background-position:-5351px 0px}.iti__flag.iti__us{height:11px;background-position:-5373px 0px}.iti__flag.iti__uy{height:14px;background-position:-5395px 0px}.iti__flag.iti__uz{height:10px;background-position:-5417px 0px}.iti__flag.iti__va{height:15px;background-position:-5439px 0px}.iti__flag.iti__vc{height:14px;background-position:-5456px 0px}.iti__flag.iti__ve{height:14px;background-position:-5478px 0px}.iti__flag.iti__vg{height:10px;background-position:-5500px 0px}.iti__flag.iti__vi{height:14px;background-position:-5522px 0px}.iti__flag.iti__vn{height:14px;background-position:-5544px 0px}.iti__flag.iti__vu{height:12px;background-position:-5566px 0px}.iti__flag.iti__wf{height:14px;background-position:-5588px 0px}.iti__flag.iti__ws{height:10px;background-position:-5610px 0px}.iti__flag.iti__xk{height:15px;background-position:-5632px 0px}.iti__flag.iti__ye{height:14px;background-position:-5654px 0px}.iti__flag.iti__yt{height:14px;background-position:-5676px 0px}.iti__flag.iti__za{height:14px;background-position:-5698px 0px}.iti__flag.iti__zm{height:14px;background-position:-5720px 0px}.iti__flag.iti__zw{height:10px;background-position:-5742px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"] }]
|
|
1729
|
+
args: [{ selector: 'sky-country-field', providers: [SKY_COUNTRY_FIELD_VALIDATOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <span\n class=\"sky-country-field-container\"\n [ngClass]=\"{\n 'sky-country-field-disabled': disabled\n }\"\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"inputId\"\n [data]=\"countries\"\n [propertiesToSearch]=\"['name', 'iso2']\"\n [searchResultTemplate]=\"countrySearchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n (selectionChange)=\"onCountrySelected($event)\"\n >\n <div\n class=\"sky-country-field-input\"\n [ngClass]=\"{\n 'sky-country-field-input-with-flag':\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n }\"\n >\n <div\n *ngIf=\"\n selectedCountry && selectedCountry.iso2 && !hideSelectedCountryFlag\n \"\n class=\"sky-country-field-flag\"\n >\n <div\n class=\"iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry.iso2.toLowerCase()\"\n ></div>\n </div>\n <textarea\n class=\"sky-form-control\"\n name=\"selectedCountry\"\n rows=\"1\"\n skyAutocomplete\n [attr.id]=\"inputId\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [formControl]=\"countrySearchFormControl\"\n [placeholder]=\"\n context?.showPlaceholderText || currentTheme === 'default'\n ? ('skyux_country_field_search_placeholder' | skyLibResources)\n : ''\n \"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n </div>\n </sky-autocomplete>\n </span>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div\n class=\"sky-country-field-search-result-flag\"\n [ngClass]=\"'iti__flag iti__' + item.iso2.toLowerCase()\"\n ></div>\n {{ item.name }}\n <span *ngIf=\"includePhoneInfo\" class=\"sky-deemphasized\">\n {{ item.dialCode }}\n </span>\n</ng-template>\n\n<!-- This template should only be used in modern theme input boxes. -->\n<ng-template #searchIconTemplateRef>\n <div class=\"sky-input-group-icon sky-input-box-icon-inset\">\n <sky-icon icon=\"search\" />\n </div>\n</ng-template>\n", styles: [".iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px #0003;background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:none}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:#0000000d}.iti__flag-box,.iti__country-name{margin-right:6px}[dir=rtl] .iti__flag-box,[dir=rtl] .iti__country-name{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=text],.iti--allow-dropdown input[type=tel],.iti--separate-dial-code input,.iti--separate-dial-code input[type=text],.iti--separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=text],[dir=rtl] .iti--separate-dial-code input[type=tel]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:#0000000d}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:#0000000d}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{inset:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:12px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cq{height:12px;background-position:-1115px 0px}.iti__flag.iti__cr{height:12px;background-position:-1137px 0px}.iti__flag.iti__cu{height:10px;background-position:-1159px 0px}.iti__flag.iti__cv{height:12px;background-position:-1181px 0px}.iti__flag.iti__cw{height:14px;background-position:-1203px 0px}.iti__flag.iti__cx{height:10px;background-position:-1225px 0px}.iti__flag.iti__cy{height:14px;background-position:-1247px 0px}.iti__flag.iti__cz{height:14px;background-position:-1269px 0px}.iti__flag.iti__de{height:12px;background-position:-1291px 0px}.iti__flag.iti__dg{height:10px;background-position:-1313px 0px}.iti__flag.iti__dj{height:14px;background-position:-1335px 0px}.iti__flag.iti__dk{height:15px;background-position:-1357px 0px}.iti__flag.iti__dm{height:10px;background-position:-1379px 0px}.iti__flag.iti__do{height:14px;background-position:-1401px 0px}.iti__flag.iti__dz{height:14px;background-position:-1423px 0px}.iti__flag.iti__ea{height:14px;background-position:-1445px 0px}.iti__flag.iti__ec{height:14px;background-position:-1467px 0px}.iti__flag.iti__ee{height:13px;background-position:-1489px 0px}.iti__flag.iti__eg{height:14px;background-position:-1511px 0px}.iti__flag.iti__eh{height:10px;background-position:-1533px 0px}.iti__flag.iti__er{height:10px;background-position:-1555px 0px}.iti__flag.iti__es{height:14px;background-position:-1577px 0px}.iti__flag.iti__et{height:10px;background-position:-1599px 0px}.iti__flag.iti__eu{height:14px;background-position:-1621px 0px}.iti__flag.iti__ez{height:14px;background-position:-1643px 0px}.iti__flag.iti__fi{height:12px;background-position:-1665px 0px}.iti__flag.iti__fj{height:10px;background-position:-1687px 0px}.iti__flag.iti__fk{height:10px;background-position:-1709px 0px}.iti__flag.iti__fm{height:11px;background-position:-1731px 0px}.iti__flag.iti__fo{height:15px;background-position:-1753px 0px}.iti__flag.iti__fr{height:14px;background-position:-1775px 0px}.iti__flag.iti__fx{height:14px;background-position:-1797px 0px}.iti__flag.iti__ga{height:15px;background-position:-1819px 0px}.iti__flag.iti__gb{height:10px;background-position:-1841px 0px}.iti__flag.iti__gd{height:12px;background-position:-1863px 0px}.iti__flag.iti__ge{height:14px;background-position:-1885px 0px}.iti__flag.iti__gf{height:14px;background-position:-1907px 0px}.iti__flag.iti__gg{height:14px;background-position:-1929px 0px}.iti__flag.iti__gh{height:14px;background-position:-1951px 0px}.iti__flag.iti__gi{height:10px;background-position:-1973px 0px}.iti__flag.iti__gl{height:14px;background-position:-1995px 0px}.iti__flag.iti__gm{height:14px;background-position:-2017px 0px}.iti__flag.iti__gn{height:14px;background-position:-2039px 0px}.iti__flag.iti__gp{height:14px;background-position:-2061px 0px}.iti__flag.iti__gq{height:14px;background-position:-2083px 0px}.iti__flag.iti__gr{height:14px;background-position:-2105px 0px}.iti__flag.iti__gs{height:10px;background-position:-2127px 0px}.iti__flag.iti__gt{height:13px;background-position:-2149px 0px}.iti__flag.iti__gu{height:11px;background-position:-2171px 0px}.iti__flag.iti__gw{height:10px;background-position:-2193px 0px}.iti__flag.iti__gy{height:12px;background-position:-2215px 0px}.iti__flag.iti__hk{height:14px;background-position:-2237px 0px}.iti__flag.iti__hm{height:10px;background-position:-2259px 0px}.iti__flag.iti__hn{height:10px;background-position:-2281px 0px}.iti__flag.iti__hr{height:10px;background-position:-2303px 0px}.iti__flag.iti__ht{height:12px;background-position:-2325px 0px}.iti__flag.iti__hu{height:10px;background-position:-2347px 0px}.iti__flag.iti__ic{height:14px;background-position:-2369px 0px}.iti__flag.iti__id{height:14px;background-position:-2391px 0px}.iti__flag.iti__ie{height:10px;background-position:-2413px 0px}.iti__flag.iti__il{height:15px;background-position:-2435px 0px}.iti__flag.iti__im{height:10px;background-position:-2457px 0px}.iti__flag.iti__in{height:14px;background-position:-2479px 0px}.iti__flag.iti__io{height:10px;background-position:-2501px 0px}.iti__flag.iti__iq{height:14px;background-position:-2523px 0px}.iti__flag.iti__ir{height:12px;background-position:-2545px 0px}.iti__flag.iti__is{height:15px;background-position:-2567px 0px}.iti__flag.iti__it{height:14px;background-position:-2589px 0px}.iti__flag.iti__je{height:12px;background-position:-2611px 0px}.iti__flag.iti__jm{height:10px;background-position:-2633px 0px}.iti__flag.iti__jo{height:10px;background-position:-2655px 0px}.iti__flag.iti__jp{height:14px;background-position:-2677px 0px}.iti__flag.iti__ke{height:14px;background-position:-2699px 0px}.iti__flag.iti__kg{height:12px;background-position:-2721px 0px}.iti__flag.iti__kh{height:13px;background-position:-2743px 0px}.iti__flag.iti__ki{height:10px;background-position:-2765px 0px}.iti__flag.iti__km{height:12px;background-position:-2787px 0px}.iti__flag.iti__kn{height:14px;background-position:-2809px 0px}.iti__flag.iti__kp{height:10px;background-position:-2831px 0px}.iti__flag.iti__kr{height:14px;background-position:-2853px 0px}.iti__flag.iti__kw{height:10px;background-position:-2875px 0px}.iti__flag.iti__ky{height:10px;background-position:-2897px 0px}.iti__flag.iti__kz{height:10px;background-position:-2919px 0px}.iti__flag.iti__la{height:14px;background-position:-2941px 0px}.iti__flag.iti__lb{height:14px;background-position:-2963px 0px}.iti__flag.iti__lc{height:10px;background-position:-2985px 0px}.iti__flag.iti__li{height:12px;background-position:-3007px 0px}.iti__flag.iti__lk{height:10px;background-position:-3029px 0px}.iti__flag.iti__lr{height:11px;background-position:-3051px 0px}.iti__flag.iti__ls{height:14px;background-position:-3073px 0px}.iti__flag.iti__lt{height:12px;background-position:-3095px 0px}.iti__flag.iti__lu{height:12px;background-position:-3117px 0px}.iti__flag.iti__lv{height:10px;background-position:-3139px 0px}.iti__flag.iti__ly{height:10px;background-position:-3161px 0px}.iti__flag.iti__ma{height:14px;background-position:-3183px 0px}.iti__flag.iti__mc{height:15px;background-position:-3205px 0px}.iti__flag.iti__md{height:10px;background-position:-3226px 0px}.iti__flag.iti__me{height:10px;background-position:-3248px 0px}.iti__flag.iti__mf{height:14px;background-position:-3270px 0px}.iti__flag.iti__mg{height:14px;background-position:-3292px 0px}.iti__flag.iti__mh{height:11px;background-position:-3314px 0px}.iti__flag.iti__mk{height:10px;background-position:-3336px 0px}.iti__flag.iti__ml{height:14px;background-position:-3358px 0px}.iti__flag.iti__mm{height:14px;background-position:-3380px 0px}.iti__flag.iti__mn{height:10px;background-position:-3402px 0px}.iti__flag.iti__mo{height:14px;background-position:-3424px 0px}.iti__flag.iti__mp{height:10px;background-position:-3446px 0px}.iti__flag.iti__mq{height:14px;background-position:-3468px 0px}.iti__flag.iti__mr{height:14px;background-position:-3490px 0px}.iti__flag.iti__ms{height:10px;background-position:-3512px 0px}.iti__flag.iti__mt{height:14px;background-position:-3534px 0px}.iti__flag.iti__mu{height:14px;background-position:-3556px 0px}.iti__flag.iti__mv{height:14px;background-position:-3578px 0px}.iti__flag.iti__mw{height:14px;background-position:-3600px 0px}.iti__flag.iti__mx{height:12px;background-position:-3622px 0px}.iti__flag.iti__my{height:10px;background-position:-3644px 0px}.iti__flag.iti__mz{height:14px;background-position:-3666px 0px}.iti__flag.iti__na{height:14px;background-position:-3688px 0px}.iti__flag.iti__nc{height:10px;background-position:-3710px 0px}.iti__flag.iti__ne{height:15px;background-position:-3732px 0px}.iti__flag.iti__nf{height:10px;background-position:-3752px 0px}.iti__flag.iti__ng{height:10px;background-position:-3774px 0px}.iti__flag.iti__ni{height:12px;background-position:-3796px 0px}.iti__flag.iti__nl{height:14px;background-position:-3818px 0px}.iti__flag.iti__no{height:15px;background-position:-3840px 0px}.iti__flag.iti__np{height:15px;background-position:-3862px 0px}.iti__flag.iti__nr{height:10px;background-position:-3877px 0px}.iti__flag.iti__nu{height:10px;background-position:-3899px 0px}.iti__flag.iti__nz{height:10px;background-position:-3921px 0px}.iti__flag.iti__om{height:10px;background-position:-3943px 0px}.iti__flag.iti__pa{height:14px;background-position:-3965px 0px}.iti__flag.iti__pe{height:14px;background-position:-3987px 0px}.iti__flag.iti__pf{height:14px;background-position:-4009px 0px}.iti__flag.iti__pg{height:15px;background-position:-4031px 0px}.iti__flag.iti__ph{height:10px;background-position:-4053px 0px}.iti__flag.iti__pk{height:14px;background-position:-4075px 0px}.iti__flag.iti__pl{height:13px;background-position:-4097px 0px}.iti__flag.iti__pm{height:14px;background-position:-4119px 0px}.iti__flag.iti__pn{height:10px;background-position:-4141px 0px}.iti__flag.iti__pr{height:14px;background-position:-4163px 0px}.iti__flag.iti__ps{height:10px;background-position:-4185px 0px}.iti__flag.iti__pt{height:14px;background-position:-4207px 0px}.iti__flag.iti__pw{height:13px;background-position:-4229px 0px}.iti__flag.iti__py{height:11px;background-position:-4251px 0px}.iti__flag.iti__qa{height:8px;background-position:-4273px 0px}.iti__flag.iti__re{height:14px;background-position:-4295px 0px}.iti__flag.iti__ro{height:14px;background-position:-4317px 0px}.iti__flag.iti__rs{height:14px;background-position:-4339px 0px}.iti__flag.iti__ru{height:14px;background-position:-4361px 0px}.iti__flag.iti__rw{height:14px;background-position:-4383px 0px}.iti__flag.iti__sa{height:14px;background-position:-4405px 0px}.iti__flag.iti__sb{height:10px;background-position:-4427px 0px}.iti__flag.iti__sc{height:10px;background-position:-4449px 0px}.iti__flag.iti__sd{height:10px;background-position:-4471px 0px}.iti__flag.iti__se{height:13px;background-position:-4493px 0px}.iti__flag.iti__sg{height:14px;background-position:-4515px 0px}.iti__flag.iti__sh{height:10px;background-position:-4537px 0px}.iti__flag.iti__si{height:10px;background-position:-4559px 0px}.iti__flag.iti__sj{height:15px;background-position:-4581px 0px}.iti__flag.iti__sk{height:14px;background-position:-4603px 0px}.iti__flag.iti__sl{height:14px;background-position:-4625px 0px}.iti__flag.iti__sm{height:15px;background-position:-4647px 0px}.iti__flag.iti__sn{height:14px;background-position:-4669px 0px}.iti__flag.iti__so{height:14px;background-position:-4691px 0px}.iti__flag.iti__sr{height:14px;background-position:-4713px 0px}.iti__flag.iti__ss{height:10px;background-position:-4735px 0px}.iti__flag.iti__st{height:10px;background-position:-4757px 0px}.iti__flag.iti__su{height:10px;background-position:-4779px 0px}.iti__flag.iti__sv{height:12px;background-position:-4801px 0px}.iti__flag.iti__sx{height:14px;background-position:-4823px 0px}.iti__flag.iti__sy{height:14px;background-position:-4845px 0px}.iti__flag.iti__sz{height:14px;background-position:-4867px 0px}.iti__flag.iti__ta{height:10px;background-position:-4889px 0px}.iti__flag.iti__tc{height:10px;background-position:-4911px 0px}.iti__flag.iti__td{height:14px;background-position:-4933px 0px}.iti__flag.iti__tf{height:14px;background-position:-4955px 0px}.iti__flag.iti__tg{height:13px;background-position:-4977px 0px}.iti__flag.iti__th{height:14px;background-position:-4999px 0px}.iti__flag.iti__tj{height:10px;background-position:-5021px 0px}.iti__flag.iti__tk{height:10px;background-position:-5043px 0px}.iti__flag.iti__tl{height:10px;background-position:-5065px 0px}.iti__flag.iti__tm{height:14px;background-position:-5087px 0px}.iti__flag.iti__tn{height:14px;background-position:-5109px 0px}.iti__flag.iti__to{height:10px;background-position:-5131px 0px}.iti__flag.iti__tr{height:14px;background-position:-5153px 0px}.iti__flag.iti__tt{height:12px;background-position:-5175px 0px}.iti__flag.iti__tv{height:10px;background-position:-5197px 0px}.iti__flag.iti__tw{height:14px;background-position:-5219px 0px}.iti__flag.iti__tz{height:14px;background-position:-5241px 0px}.iti__flag.iti__ua{height:14px;background-position:-5263px 0px}.iti__flag.iti__ug{height:14px;background-position:-5285px 0px}.iti__flag.iti__uk{height:10px;background-position:-5307px 0px}.iti__flag.iti__um{height:11px;background-position:-5329px 0px}.iti__flag.iti__un{height:14px;background-position:-5351px 0px}.iti__flag.iti__us{height:11px;background-position:-5373px 0px}.iti__flag.iti__uy{height:14px;background-position:-5395px 0px}.iti__flag.iti__uz{height:10px;background-position:-5417px 0px}.iti__flag.iti__va{height:15px;background-position:-5439px 0px}.iti__flag.iti__vc{height:14px;background-position:-5456px 0px}.iti__flag.iti__ve{height:14px;background-position:-5478px 0px}.iti__flag.iti__vg{height:10px;background-position:-5500px 0px}.iti__flag.iti__vi{height:14px;background-position:-5522px 0px}.iti__flag.iti__vn{height:14px;background-position:-5544px 0px}.iti__flag.iti__vu{height:12px;background-position:-5566px 0px}.iti__flag.iti__wf{height:14px;background-position:-5588px 0px}.iti__flag.iti__ws{height:10px;background-position:-5610px 0px}.iti__flag.iti__xk{height:15px;background-position:-5632px 0px}.iti__flag.iti__ye{height:14px;background-position:-5654px 0px}.iti__flag.iti__yt{height:14px;background-position:-5676px 0px}.iti__flag.iti__za{height:14px;background-position:-5698px 0px}.iti__flag.iti__zm{height:14px;background-position:-5720px 0px}.iti__flag.iti__zw{height:10px;background-position:-5742px 0px}.iti__flag{height:15px;box-shadow:0 0 1px #888;background-image:url(../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag{background-image:url(../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}.sky-country-field-country-btn+::ng-deep .sky-form-control{border-left:none}.sky-country-field-container{width:100%}.sky-country-field-search-result-flag{display:inline-block;margin-right:5px}.sky-country-field-flag{display:none}.sky-country-field-disabled .sky-country-field-input{cursor:default;background-color:#cdcfd2}.sky-country-field-disabled .sky-country-field-flag{opacity:.65}.sky-country-field-input{cursor:text;display:flex;position:relative}.sky-country-field-input .sky-country-field-flag{align-items:center;margin-bottom:auto;margin-top:auto;position:absolute;left:13px;height:35px;bottom:0}.sky-country-field-input textarea{overflow:hidden;resize:none;white-space:nowrap}.sky-country-field-input-with-flag .sky-country-field-flag{display:flex}.sky-country-field-input-with-flag .sky-form-control{padding-left:40px}.sky-country-field-country-selected,.sky-country-field-country-default{border-bottom:1px solid #e2e3e4}:host(.ng-invalid.ng-touched) .sky-country-field-input textarea{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}::ng-deep .sky-theme-modern .sky-country-field-disabled .sky-country-field-flag{filter:grayscale(100%)}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input{background-color:transparent;border-radius:6px}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input textarea.sky-form-control{overflow:hidden;resize:none;white-space:nowrap}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-country-field-flag{height:40px;left:15px;opacity:1}::ng-deep .sky-theme-modern .sky-input-box .sky-form-group .sky-country-field-input-with-flag .sky-form-control{padding-left:45px}.iti__flag{max-width:25px;max-height:13px;background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags.webp)!important}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.iti__flag .iti__flag{background-image:url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.3/assets/images/intl-tel-input/flags@2x.webp)!important}}\n"] }]
|
|
1729
1730
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i2.SkyInputBoxHostService, decorators: [{
|
|
1730
1731
|
type: Optional
|
|
1731
1732
|
}] }, { type: i2$1.SkyThemeService, decorators: [{
|
|
@@ -1880,6 +1881,7 @@ class SkySearchComponent {
|
|
|
1880
1881
|
return this.#_disabled;
|
|
1881
1882
|
}
|
|
1882
1883
|
#changeRef;
|
|
1884
|
+
#contentInfoProvider;
|
|
1883
1885
|
#elRef;
|
|
1884
1886
|
#mediaQueryService;
|
|
1885
1887
|
#searchAdapter;
|
|
@@ -1908,6 +1910,7 @@ class SkySearchComponent {
|
|
|
1908
1910
|
this.isFullWidth = false;
|
|
1909
1911
|
this.mobileSearchShown = false;
|
|
1910
1912
|
this.searchButtonShown = false;
|
|
1913
|
+
this.#contentInfoProvider = inject(SkyContentInfoProvider, { optional: true });
|
|
1911
1914
|
this.#searchUpdated = new Subject();
|
|
1912
1915
|
this.#_debounceTime = 0;
|
|
1913
1916
|
this.#_disabled = false;
|
|
@@ -1916,6 +1919,7 @@ class SkySearchComponent {
|
|
|
1916
1919
|
this.#elRef = elRef;
|
|
1917
1920
|
this.#searchAdapter = searchAdapter;
|
|
1918
1921
|
this.#changeRef = changeRef;
|
|
1922
|
+
this.contentInfoObs = this.#contentInfoProvider?.getInfo();
|
|
1919
1923
|
}
|
|
1920
1924
|
ngOnInit() {
|
|
1921
1925
|
if (this.#searchShouldCollapse()) {
|
|
@@ -2062,7 +2066,7 @@ class SkySearchComponent {
|
|
|
2062
2066
|
});
|
|
2063
2067
|
}
|
|
2064
2068
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkySearchComponent, deps: [{ token: i1.SkyMediaQueryService }, { token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : (ariaLabel ?? '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 skyId\n #searchInput=\"skyId\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n size=\"sm\"\n ></sky-icon>\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\n *ngTemplateOutlet=\"searchIconTemplate\"\n ></ng-container>\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\"></ng-container>\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\"> </sky-icon>\n </button>\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\"></sky-icon>\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
2069
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources : (contentInfoObs | async)?.descriptor)\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 skyId\n #searchInput=\"skyId\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplate\"\n ></ng-container>\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\"></ng-container>\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
|
|
2066
2070
|
trigger('inputState', [
|
|
2067
2071
|
state(INPUT_HIDDEN_STATE, style({
|
|
2068
2072
|
opacity: 0,
|
|
@@ -2090,7 +2094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
2090
2094
|
})),
|
|
2091
2095
|
transition('* <=> *', animate('150ms')),
|
|
2092
2096
|
]),
|
|
2093
|
-
], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n :
|
|
2097
|
+
], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n <div class=\"sky-search-button-container\">\n <button\n class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n [hidden]=\"!searchButtonShown\"\n [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n (click)=\"toggleSearchInput(true)\"\n >\n <ng-container *ngTemplateOutlet=\"searchIconTemplate\"></ng-container>\n </button>\n </div>\n <div\n class=\"sky-search-dismiss-container\"\n [hidden]=\"searchButtonShown\"\n [ngClass]=\"{\n 'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n }\"\n >\n <div class=\"sky-search-item-input\">\n <div\n class=\"sky-search-input-container\"\n [@inputState]=\"inputAnimate\"\n (@inputState.start)=\"inputAnimationStart($event)\"\n (@inputState.done)=\"inputAnimationEnd($event)\"\n [ngClass]=\"{\n 'sky-search-input-container-has-value': searchText?.trim()\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <input\n class=\"sky-form-control sky-search-input sky-rounded-corners\"\n type=\"text\"\n [attr.aria-label]=\"\n ariaLabelledBy\n ? undefined\n : ariaLabel ||\n ((contentInfoObs | async)?.descriptor\n ? ('skyux_search_aria_label_descriptor'\n | skyLibResources : (contentInfoObs | async)?.descriptor)\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 skyId\n #searchInput=\"skyId\"\n />\n <span\n class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n [hidden]=\"!clearButtonShown\"\n >\n <button\n aria-hidden=\"true\"\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"clearSearchText()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n </button>\n </span>\n <span\n *skyThemeIf=\"'default'\"\n class=\"sky-input-group-btn sky-input-box-btn-inset\"\n >\n <button\n class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"applySearchText(searchText)\"\n >\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplate\"\n ></ng-container>\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\"></ng-container>\n </div>\n </sky-input-box>\n </div>\n </div>\n <div class=\"sky-search-item-dismiss\">\n <button\n *ngIf=\"mobileSearchShown\"\n class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n (click)=\"toggleSearchInput(false)\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"chevron-circle-left\"\n size=\"lg\"\n />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n </button>\n </div>\n </div>\n</div>\n\n<ng-template #searchIconTemplate>\n <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
|
|
2094
2098
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }, { type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
|
|
2095
2099
|
type: Input
|
|
2096
2100
|
}], ariaLabelledBy: [{
|
|
@@ -2362,7 +2366,7 @@ class SkySelectionModalComponent {
|
|
|
2362
2366
|
}
|
|
2363
2367
|
}
|
|
2364
2368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\"
|
|
2369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\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 (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 (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 [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected : selectedIdMap\n \"\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: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\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 let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ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$1.λ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: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2366
2370
|
}
|
|
2367
2371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2368
2372
|
type: Component,
|
|
@@ -2380,7 +2384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
2380
2384
|
SkyToolbarModule,
|
|
2381
2385
|
SkyWaitModule,
|
|
2382
2386
|
SkyViewkeeperModule,
|
|
2383
|
-
], 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\"
|
|
2387
|
+
], 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\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 (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 (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 [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected : selectedIdMap\n \"\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: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\n [disabled]=\"isSearching\"\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 let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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}\n"] }]
|
|
2384
2388
|
}], ctorParameters: function () { return []; } });
|
|
2385
2389
|
|
|
2386
2390
|
/**
|
|
@@ -2907,7 +2911,7 @@ class SkyLookupShowMoreModalComponent {
|
|
|
2907
2911
|
this.#changeDetector.markForCheck();
|
|
2908
2912
|
}
|
|
2909
2913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\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 class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\"
|
|
2914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\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 class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\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 (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 (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 [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\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: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\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 let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4$1.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i6.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i6.λ2, selector: "sky-modal-content" }, { kind: "component", type: i6.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i6.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$1.λ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$1.λ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: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2911
2915
|
}
|
|
2912
2916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
2913
2917
|
type: Component,
|
|
@@ -2923,7 +2927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
|
|
|
2923
2927
|
SkyThemeModule,
|
|
2924
2928
|
SkyToolbarModule,
|
|
2925
2929
|
SkyViewkeeperModule,
|
|
2926
|
-
], 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\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 class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\"
|
|
2930
|
+
], 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 <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n {{ context.userConfig.title }}\n </ng-container>\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 class=\"sky-lookup-show-more-modal-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <button\n *ngIf=\"context.showAddButton\"\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon icon=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n <sky-toolbar\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-toolbar\"\n >\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 (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 (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 [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"displayedItems.length === 0\"\n class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n >\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\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: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n >\n </sky-infinite-scroll>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n type=\"button\"\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 let-item=\"item\" #defaultItemTemplate>\n {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n <ng-container *ngIf=\"context.selectMode === 'single'\">\n {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n </ng-container>\n <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n </ng-container>\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}\n"] }]
|
|
2927
2931
|
}], ctorParameters: function () { return []; } });
|
|
2928
2932
|
|
|
2929
2933
|
class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
@@ -3562,11 +3566,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
3562
3566
|
return !!(this.#openNativePicker || this.#openSelectionModal);
|
|
3563
3567
|
}
|
|
3564
3568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3565
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || controlId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon icon=\"search\"></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon icon=\"search\"></sky-icon>\n </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || controlId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon icon=\"search\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon icon=\"search\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3566
3570
|
}
|
|
3567
3571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyLookupComponent, decorators: [{
|
|
3568
3572
|
type: Component,
|
|
3569
|
-
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || controlId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon icon=\"search\"
|
|
3573
|
+
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\n <div\n class=\"sky-lookup\"\n [ngClass]=\"{\n 'sky-lookup-focused': isInputFocused,\n 'sky-lookup-disabled': disabled,\n 'sky-lookup-single': selectMode === 'single'\n }\"\n #lookupWrapper\n >\n <sky-autocomplete\n [ariaLabelledBy]=\"ariaLabelledBy || controlId\"\n [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n [data]=\"data\"\n [debounceTime]=\"debounceTime\"\n [descriptorProperty]=\"descriptorProperty\"\n [enableShowMore]=\"enableShowMore\"\n [messageStream]=\"autocompleteController\"\n [propertiesToSearch]=\"propertiesToSearch\"\n [search]=\"searchOrDefault\"\n [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n [searchFilters]=\"searchFilters\"\n [searchResultsLimit]=\"searchResultsLimit\"\n [searchResultTemplate]=\"searchResultTemplate\"\n [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n [showAddButton]=\"showAddButton\"\n [wrapperClass]=\"wrapperClass\"\n (addClick)=\"addButtonClicked()\"\n (searchAsync)=\"onSearchAsync($event)\"\n (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n (showMoreClick)=\"onShowMoreClick($event)\"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <div class=\"sky-lookup-search-flex-wrapper\">\n <div\n class=\"sky-lookup-search\"\n [ngClass]=\"{\n 'sky-field-status-active': isInputFocused && !disabled\n }\"\n >\n <sky-tokens\n *ngIf=\"selectMode === 'multiple'\"\n class=\"sky-lookup-tokens\"\n [disabled]=\"disabled\"\n [displayWith]=\"descriptorProperty\"\n [focusable]=\"false\"\n [messageStream]=\"tokensController\"\n [trackWith]=\"idProperty\"\n [tokens]=\"tokens\"\n (keyup)=\"onTokensKeyUp($event)\"\n (tokensChange)=\"onTokensChange($event)\"\n (tokensRendered)=\"onTokensRendered()\"\n (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n (keydown)=\"inputKeydown($event)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </sky-tokens>\n <div\n *ngIf=\"selectMode === 'single'\"\n class=\"sky-lookup-single-control\"\n >\n <textarea\n class=\"sky-form-control sky-lookup-input\"\n rows=\"1\"\n skyAutocomplete\n wrap=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"controlId\"\n [attr.placeholder]=\"placeholderText\"\n [autocompleteAttribute]=\"autocompleteAttribute\"\n [disabled]=\"disabled\"\n (blur)=\"onAutocompleteBlur()\"\n ></textarea>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n </div>\n </sky-autocomplete>\n </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n class=\"sky-btn sky-btn-default\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon icon=\"search\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon icon=\"search\" />\n </div>\n</ng-template>\n", styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup{margin-top:-26px;padding-top:26px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}\n"] }]
|
|
3570
3574
|
}], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
|
|
3571
3575
|
type: Self
|
|
3572
3576
|
}, {
|