@skyux/lookup 11.16.0 → 11.18.0

package/fesm2022/skyux-lookup.mjs

@@ -2119,7 +2119,7 @@ class SkySearchComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySearchComponent, deps: [{ token: i0.ElementRef }, { token: SkySearchAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n      >\n        <sky-input-box [disabled]=\"disabled\">\n          <input\n            #searchInput=\"skyId\"\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            skyId\n            [attr.aria-label]=\"\n              ariaLabelledBy\n                ? undefined\n                : ariaLabel ||\n                  ((contentInfoObs | async)?.descriptor?.type === 'text'\n                    ? ('skyux_search_aria_label_descriptor'\n                      | skyLibResources\n                        : (contentInfoObs | async)?.descriptor?.value)\n                    : ('skyux_search_label' | skyLibResources))\n            \"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n              <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      @if (mobileSearchShown) {\n        <button\n          class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n          type=\"button\"\n          [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n          (click)=\"toggleSearchInput(false)\"\n        >\n          <sky-icon\n            *skyThemeIf=\"'default'\"\n            icon=\"chevron-circle-left\"\n            size=\"lg\"\n          />\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySearchComponent, selector: "sky-search", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", searchText: "searchText", expandMode: "expandMode", debounceTime: "debounceTime", disabled: "disabled", placeholderText: "placeholderText" }, outputs: { searchApply: "searchApply", searchChange: "searchChange", searchClear: "searchClear" }, providers: [SkySearchAdapterService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n      >\n        <sky-input-box [disabled]=\"disabled\">\n          <input\n            #searchInput=\"skyId\"\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            skyId\n            [attr.aria-label]=\"\n              ariaLabelledBy\n                ? undefined\n                : ariaLabel ||\n                  ((contentInfoObs | async)?.descriptor?.type === 'text'\n                    ? ('skyux_search_aria_label_descriptor'\n                      | skyLibResources\n                        : (contentInfoObs | async)?.descriptor?.value)\n                    : ('skyux_search_label' | skyLibResources))\n            \"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n              <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      @if (mobileSearchShown) {\n        <button\n          class=\"sky-btn sky-search-btn-dismiss\"\n          type=\"button\"\n          [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n          [skyThemeClass]=\"{\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"toggleSearchInput(false)\"\n        >\n          <sky-icon\n            *skyThemeIf=\"'default'\"\n            icon=\"chevron-circle-left\"\n            size=\"lg\"\n          />\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-clear-padding-right: 6px;--sky-override-search-mobile-font-size: 15px;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: #fff;--sky-override-search-container-padding: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-search-container{--sky-override-search-button-height-width: 40px;--sky-override-search-background-color: var(--modern-color-transparent);--sky-override-search-applied-mobile-button-vertical-padding: 9px;--sky-override-search-applied-mobile-button-horizontal-padding: 15px;--sky-override-search-mobile-button-vertical-padding: 9px;--sky-override-search-mobile-button-horizontal-padding: 15px;--sky-override-search-appied-border-width: 2px;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: var( --sky-color-background-action-secondary-base );--sky-override-input-icon-size: 17.3333px}sky-search .sky-search-btn-apply{padding-left:6px}sky-search .sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-override-search-appied-border-width, var(--sky-border-width-action-selected-s)) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action));padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-color-background-action-secondary-base));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-space-inset-balanced-xs))}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: var( --sky-override-search-background-color, var(--sky-color-background-action-secondary-base) )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));padding:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:var(--sky-border-radius-0);box-shadow:inset 0 -1px 0 0 var(--sky-color-border-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:var(--sky-override-input-icon-size, var(--sky-size-icon-s));color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-default);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
             trigger('inputState', [
                 state(INPUT_HIDDEN_STATE, style({
                     opacity: 0,
@@ -2147,7 +2147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             })),
                             transition('* <=> *', animate('150ms')),
                         ]),
-                    ], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n      >\n        <sky-input-box [disabled]=\"disabled\">\n          <input\n            #searchInput=\"skyId\"\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            skyId\n            [attr.aria-label]=\"\n              ariaLabelledBy\n                ? undefined\n                : ariaLabel ||\n                  ((contentInfoObs | async)?.descriptor?.type === 'text'\n                    ? ('skyux_search_aria_label_descriptor'\n                      | skyLibResources\n                        : (contentInfoObs | async)?.descriptor?.value)\n                    : ('skyux_search_label' | skyLibResources))\n            \"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n              <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      @if (mobileSearchShown) {\n        <button\n          class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n          type=\"button\"\n          [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n          (click)=\"toggleSearchInput(false)\"\n        >\n          <sky-icon\n            *skyThemeIf=\"'default'\"\n            icon=\"chevron-circle-left\"\n            size=\"lg\"\n          />\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: ["sky-search .sky-search-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0 none}sky-search .sky-search-input:focus{border:0 none;box-shadow:none;outline:none}sky-search .sky-search-input::-ms-clear{display:none}sky-search .sky-search-btn{border-left:0 none}sky-search .sky-search-btn:hover,sky-search .sky-search-btn:focus{background-color:#fff}sky-search .sky-search-btn-apply{padding-left:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-search .sky-search-btn-clear{border-right:0 none;padding-right:6px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2}sky-search .sky-search-input-focused .sky-search-btn{border-color:transparent;border-top:0 none;border-bottom:0 none}sky-search .sky-search-input-focused .sky-search-btn-apply{border-right:0 none}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:15px}}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:#fff;inset:0;padding:5px}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{width:40px}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#1c1d1f;font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{border:none;box-shadow:inset 0 0 0 2px #72bf44;padding:8px 14px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:unset;box-shadow:inset 0 -1px #1870b8}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 10px}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:17.3333px;color:#1c1d1f}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:10px 10px 10px 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:normal;color:inherit;font-weight:400}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-search-dismiss-absolute{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open,.sky-theme-modern.sky-theme-mode-dark .sky-search-btn-open-applied.sky-search-btn-open:hover{color:#72bf44}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box{--sky-background-color-input-box-group: transparent}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-search .sky-input-group-icon .sky-icon{font-size:17.333px;color:#fbfcfe}\n"] }]
+                    ], providers: [SkySearchAdapterService], template: "<div class=\"sky-search-container\">\n  <div class=\"sky-search-button-container\">\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon sky-search-btn-open\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_search_open' | skyLibResources\"\n      [hidden]=\"!searchButtonShown\"\n      [ngClass]=\"{ 'sky-search-btn-open-applied': clearButtonShown }\"\n      (click)=\"toggleSearchInput(true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n    </button>\n  </div>\n  <div\n    class=\"sky-search-dismiss-container\"\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{\n      'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth\n    }\"\n  >\n    <div class=\"sky-search-item-input\">\n      <div\n        class=\"sky-search-input-container\"\n        [@inputState]=\"inputAnimate\"\n        [ngClass]=\"{\n          'sky-search-input-container-has-value': searchText?.trim()\n        }\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n      >\n        <sky-input-box [disabled]=\"disabled\">\n          <input\n            #searchInput=\"skyId\"\n            class=\"sky-form-control sky-search-input sky-rounded-corners\"\n            type=\"text\"\n            skyId\n            [attr.aria-label]=\"\n              ariaLabelledBy\n                ? undefined\n                : ariaLabel ||\n                  ((contentInfoObs | async)?.descriptor?.type === 'text'\n                    ? ('skyux_search_aria_label_descriptor'\n                      | skyLibResources\n                        : (contentInfoObs | async)?.descriptor?.value)\n                    : ('skyux_search_label' | skyLibResources))\n            \"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.placeholder]=\"\n              placeholderText || ('skyux_search_placeholder' | skyLibResources)\n            \"\n            [disabled]=\"disabled\"\n            [ngModel]=\"searchText\"\n            (keyup)=\"enterPress($event, searchText)\"\n            (ngModelChange)=\"searchTextChanged($event)\"\n          />\n          <span\n            class=\"sky-input-group-btn sky-input-group-clear sky-input-box-btn-inset\"\n            [hidden]=\"!clearButtonShown\"\n          >\n            <button\n              aria-hidden=\"true\"\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n              tabindex=\"-1\"\n              type=\"button\"\n              [disabled]=\"disabled\"\n              (click)=\"clearSearchText()\"\n            >\n              <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" />\n              <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"sm\" />\n            </button>\n          </span>\n          <span\n            *skyThemeIf=\"'default'\"\n            class=\"sky-input-group-btn sky-input-box-btn-inset\"\n          >\n            <button\n              class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n              type=\"button\"\n              [attr.aria-label]=\"'skyux_search_label' | skyLibResources\"\n              [disabled]=\"disabled\"\n              (click)=\"applySearchText(searchText)\"\n            >\n              <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n            </button>\n          </span>\n          <div\n            *skyThemeIf=\"'modern'\"\n            aria-hidden=\"true\"\n            class=\"sky-input-group-icon sky-input-box-icon-inset-left\"\n          >\n            <ng-container *ngTemplateOutlet=\"searchIconTemplate\" />\n          </div>\n        </sky-input-box>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      @if (mobileSearchShown) {\n        <button\n          class=\"sky-btn sky-search-btn-dismiss\"\n          type=\"button\"\n          [attr.title]=\"'skyux_search_dismiss' | skyLibResources\"\n          [skyThemeClass]=\"{\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"toggleSearchInput(false)\"\n        >\n          <sky-icon\n            *skyThemeIf=\"'default'\"\n            icon=\"chevron-circle-left\"\n            size=\"lg\"\n          />\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"double-chevron-left\" />\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #searchIconTemplate>\n  <sky-icon icon=\"search\" size=\"lg\" />\n</ng-template>\n", styles: [".sky-search-container:not(.sky-theme-modern *){--sky-override-search-mobile-background-color: #ffffff;--sky-override-search-clear-padding-right: 6px;--sky-override-search-mobile-font-size: 15px;--sky-override-search-applied-border: 2px solid #72bf44;--sky-override-search-applied-mobile-button-vertical-padding: 5px;--sky-override-search-applied-mobile-button-horizontal-padding: 11px;--sky-override-search-mobile-button-vertical-padding: 6px;--sky-override-search-mobile-button-horizontal-padding: 12px;--sky-override-search-applied-box-shadow: none;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: #fff;--sky-override-search-container-padding: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-search-container{--sky-override-search-button-height-width: 40px;--sky-override-search-background-color: var(--modern-color-transparent);--sky-override-search-applied-mobile-button-vertical-padding: 9px;--sky-override-search-applied-mobile-button-horizontal-padding: 15px;--sky-override-search-mobile-button-vertical-padding: 9px;--sky-override-search-mobile-button-horizontal-padding: 15px;--sky-override-search-appied-border-width: 2px;--sky-override-search-applied-color: #72bf44;--sky-override-search-applied-background-color: var( --sky-color-background-action-secondary-base );--sky-override-input-icon-size: 17.3333px}sky-search .sky-search-btn-apply{padding-left:6px}sky-search .sky-search-btn-clear{padding-right:var(--sky-override-search-clear-padding-right)}sky-search .sky-search-input-container .sky-input-group-btn>button:focus{z-index:3}sky-search .sky-search-input-container{min-width:auto}sky-search .sky-responsive-container-xs .sky-search-input-container,sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:auto}@media (min-width: 768px){sky-search .sky-search-input-container{min-width:300px}}sky-search .sky-responsive-container-sm .sky-search-input-container,sky-search .sky-responsive-container-md .sky-search-input-container,sky-search .sky-responsive-container-lg .sky-search-input-container{min-width:300px}@media (max-width: 767px){sky-search .sky-search-input,sky-search .sky-search-btn-apply,sky-search .sky-search-btn-clear{font-size:var(--sky-override-search-mobile-font-size, var(--sky-font-size-body-m))}}sky-search .sky-btn.sky-search-btn-open{padding-top:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-btn-open-applied.sky-search-btn-open,sky-search .sky-search-btn-open-applied.sky-search-btn-open:hover{background-color:var(--sky-override-search-applied-background-color, var(--sky-color-background-selected-soft));border:var(--sky-override-search-applied-border, none);box-shadow:var(--sky-override-search-applied-box-shadow, inset 0 0 0 var(--sky-override-search-appied-border-width, var(--sky-border-width-action-selected-s)) var(--sky-override-search-applied-color, var(--sky-color-border-selected)));color:var(--sky-override-search-applied-color, var(--sky-color-icon-action));padding-top:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-top-m));padding-bottom:var(--sky-override-search-applied-mobile-button-vertical-padding, var(--sky-space-inset-pillarbox-1_2-bottom-m));padding-left:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-left-m));padding-right:var(--sky-override-search-applied-mobile-button-horizontal-padding, var(--sky-space-inset-pillarbox-1_2-right-m))}sky-search .sky-search-dismiss-container{display:flex}sky-search .sky-search-item-dismiss{flex-shrink:0;display:flex}sky-search .sky-search-item-dismiss>.sky-btn{border-color:transparent}sky-search .sky-search-item-input{flex-grow:1;display:flex}sky-search .sky-search-dismiss-absolute{align-items:center;position:absolute;background-color:var(--sky-override-search-mobile-background-color, var(--sky-color-background-action-secondary-base));inset:0;padding:var(--sky-override-search-container-padding, var(--sky-space-inset-balanced-xs))}.sky-theme-modern sky-search .sky-input-box{--sky-background-color-input-box-group: var( --sky-override-search-background-color, var(--sky-color-background-action-secondary-base) )}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn{height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2))}.sky-theme-modern sky-search .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn .sky-icon.sky-i-close{color:var(--sky-color-icon-default);font-size:inherit}.sky-theme-modern sky-search .sky-search-btn-dismiss{color:var(--sky-color-icon-default);height:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));width:var(--sky-override-search-button-height-width, calc(var(--sky-font-line_height-input-val) * var(--sky-font-size-input-val) + var(--sky-space-inset-balanced-s) * 2));padding:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{box-shadow:none}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container.sky-search-input-container-has-value .sky-input-box-group-form-control:not(.sky-input-box-group-form-control-focus,:hover) .sky-form-group{border:none;border-radius:var(--sky-border-radius-0);box-shadow:inset 0 -1px 0 0 var(--sky-color-border-selected)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 var(--sky-space-gap-icon-m)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-group-icon .sky-icon{font-size:var(--sky-override-input-icon-size, var(--sky-size-icon-s));color:var(--sky-color-icon-default)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input{width:auto;padding:var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) var(--sky-space-inset-balanced-s) 0;margin:0}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input::placeholder{font-style:var(--sky-font-style-body-s);color:var(--sky-color-text-default);font-weight:var(--bb-font-weight-regular)}.sky-theme-modern sky-search .sky-search-container .sky-search-input-container .sky-input-box-group .sky-form-group .sky-input-box-form-group-inner input:focus::placeholder{color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkySearchAdapterService }, { type: i0.ChangeDetectorRef }], propDecorators: { ariaLabel: [{
                 type: Input
             }], ariaLabelledBy: [{
@@ -3086,10 +3086,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.#_selectMode = value;
         this.#updateForSelectMode();
         if (multipleToSingle) {
-            if (this.value && this.value.length > 1) {
+            const value = this.#getValue();
+            if (value?.length > 1) {
                 // The `setTimeout` is needed to avoid a `ExpressionChangedAfterItHasBeenCheckedError` error in template forms.
                 setTimeout(() => {
-                    this.writeValue([this.value[0]]);
+                    this.#setValue([value[0]], { emitEvent: true });
                     this.#changeDetector.detectChanges();
                 });
             }
@@ -3101,11 +3102,12 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     get tokens() {
         return this.#_tokens;
     }
-    set tokens(value) {
+    set tokens(tokens) {
+        const value = this.#getValue();
         // Collapse the tokens into a single token if the user has selected many options.
-        if (this.enableShowMore && this.value.length > 5) {
+        if (this.enableShowMore && value.length > 5) {
             this.#resourcesService
-                .getString('skyux_lookup_tokens_summary', this.value.length.toString())
+                .getString('skyux_lookup_tokens_summary', value.length.toString())
                 .pipe(take(1))
                 .subscribe((label) => {
                 this.#_tokens = [
@@ -3117,20 +3119,17 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             });
         }
         else {
-            this.#_tokens = value;
+            this.#_tokens = tokens;
             this.#changeDetector.markForCheck();
         }
     }
+    /**
+     * @internal
+     * @deprecated This is exposed for unit tests only; refactor unit tests to
+     * derive the control value a different way.
+     */
     get value() {
-        return this.#_value ? this.#_value : [];
-    }
-    set value(newValue) {
-        this.#_value = newValue;
-        if (!this.#pickerModalOpen()) {
-            this.tokens = this.#parseTokens(newValue);
-        }
-        this.onChange(this.#_value);
-        this.onTouched();
+        return this.#getValue();
     }
     set autocompleteInputDirective(value) {
         this.#_autocompleteInputDirective = value;
@@ -3142,6 +3141,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #idle;
     #markForTokenFocusOnKeyUp;
     #ngUnsubscribe;
+    #notifyChange;
+    #notifyTouched;
     #openNativePicker;
     #openSelectionModal;
     #_required;
@@ -3162,6 +3163,19 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #resourcesService;
     #selectionModalSvc;
     #windowRef;
+    #getValue() {
+        return this.#_value ? this.#_value : [];
+    }
+    #setValue(newValue, options) {
+        this.#_value = newValue;
+        if (this.selectMode === 'multiple' && !this.#pickerModalOpen()) {
+            this.tokens = this.#parseTokens(newValue);
+        }
+        if (options.emitEvent) {
+            this.#notifyChange?.(this.#_value);
+        }
+        this.#updateForSelectMode();
+    }
     constructor(ngControl, inputBoxHostSvc, themeSvc) {
         super();
         this.inputBoxHostSvc = inputBoxHostSvc;
@@ -3193,11 +3207,6 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.#resourcesService = inject(SkyLibResourcesService);
         this.#selectionModalSvc = inject(SkySelectionModalService);
         this.#windowRef = inject(SkyAppWindowRef);
-        // Angular automatically constructs these methods.
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (value) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
         if (ngControl) {
             ngControl.valueAccessor = this;
         }
@@ -3250,16 +3259,15 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         });
     }
     onAutocompleteSelectionChange(change) {
-        /* istanbul ignore else */
         if (change.selectedItem) {
             this.#addToSelected(change.selectedItem);
         }
-        else if (this.selectMode === 'single') {
-            this.writeValue([]);
+        else {
+            this.#setValue([], { emitEvent: true });
         }
     }
     onAutocompleteBlur() {
-        this.onTouched();
+        this.#notifyTouched?.();
     }
     onTokensChange(change) {
         if (!change) {
@@ -3269,14 +3277,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             if (change.length === 0) {
                 this.#focusInput();
             }
-            // NOTE: We do this here instead of just using the `value` setter because we need to use the
-            // set of tokens returned here for the purposes of setting focus (see `onTokensKeyUp`).
-            this.#_value = change.map((token) => {
+            this.tokens = change;
+            const value = change.map((token) => {
                 return token.value;
             });
-            this.tokens = change;
-            this.onChange(this.#_value);
-            this.onTouched();
+            this.#setValue(value, { emitEvent: true });
         }
     }
     onTokensFocusIndexOverRange() {
@@ -3309,14 +3314,13 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     }
     writeValue(value) {
         // Since we are dealing with arrays - clone the array being sent in to ensure we aren't modifying a consumers outer array
-        this.value = value ? value.slice() : [];
-        this.#updateForSelectMode();
+        this.#setValue(value ? value.slice() : [], { emitEvent: false });
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.#notifyChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.#notifyTouched = fn;
     }
     // Allows Angular to disable the input.
     setDisabledState(disabled) {
@@ -3417,11 +3421,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             this.showMoreConfig.customPicker.open({
                 items: this.data,
                 initialSearch,
-                initialValue: this.value,
+                initialValue: this.#getValue(),
             });
         }
         else {
-            const initialValue = this.value;
+            const initialValue = this.#getValue();
             if (this.#hasSearchAsync()) {
                 this.#openSelectionModal =
                     this.#createSelectionModalInstance(initialSearch);
@@ -3469,7 +3473,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         }
     }
     #createSelectionModalInstance(initialSearch) {
-        const initialValue = this.value;
+        const initialValue = this.#getValue();
         const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
         if (!modalConfig.itemTemplate) {
             modalConfig.itemTemplate = this.searchResultTemplate;
@@ -3504,7 +3508,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         });
     }
     #createNativePickerInstance(initialSearch) {
-        const initialValue = this.value;
+        const initialValue = this.#getValue();
         const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
         if (!modalConfig.itemTemplate) {
             modalConfig.itemTemplate = this.searchResultTemplate;
@@ -3535,7 +3539,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.showMorePickerId = undefined;
         /* istanbul ignore next */
         selectedItems = selectedItems || [];
-        this.writeValue(selectedItems);
+        this.#setValue(selectedItems, { emitEvent: true });
         this.#focusInput();
         this.#changeDetector.markForCheck();
     }
@@ -3543,21 +3547,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.searchAsync.emit(args);
     }
     #addToSelected(item) {
+        const value = this.#getValue();
         let selectedItems;
         if (this.selectMode === 'single') {
             selectedItems = [item];
         }
         else {
-            selectedItems = this.value;
+            selectedItems = value;
             const idProperty = this.idProperty || '';
             // If items have a unique identifier, don't allow the same item to be added twice.
             if (!this.idProperty ||
-                !this.value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
+                !value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
                 selectedItems.push(item);
             }
             this.clearSearchText();
         }
-        this.writeValue(selectedItems);
+        this.#setValue(selectedItems, { emitEvent: true });
     }
     #addEventListeners() {
         this.#idle = new Subject();
@@ -3640,10 +3645,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
                 }
             }
             if (addItemToValue) {
+                const oldValue = this.#getValue();
                 const newValue = this.selectMode === 'multiple'
-                    ? this.value.concat(args.item)
+                    ? oldValue.concat(args.item)
                     : [args.item];
-                this.writeValue(newValue);
+                this.#setValue(newValue, { emitEvent: true });
             }
         }
     }
@@ -3663,7 +3669,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #updateForSelectMode() {
         if (this.autocompleteInputDirective) {
             if (this.selectMode === 'single') {
-                this.autocompleteInputDirective.value = this.value && this.value[0];
+                const value = this.#getValue();
+                this.autocompleteInputDirective.value = value && value[0];
             }
             else {
                 this.clearSearchText();