@ethlete/cdk 3.18.0 → 3.18.2

package/fesm2022/ethlete-cdk.mjs

@@ -2,9 +2,9 @@ import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, NgFor, NgComponentOutlet, DOCUMENT, JsonPipe, formatDate } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, signal, Optional, Inject, Injectable, SkipSelf, HostListener, ViewContainerRef, EventEmitter, NgZone, isDevMode, Output, NgModule, ChangeDetectorRef, ViewChild, computed, runInInjectionContext, TemplateRef, forwardRef, LOCALE_ID, numberAttribute, ViewChildren, Renderer2, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, computed, signal, Optional, Inject, Injectable, SkipSelf, HostListener, ViewContainerRef, EventEmitter, NgZone, isDevMode, Output, NgModule, ChangeDetectorRef, ViewChild, runInInjectionContext, TemplateRef, forwardRef, LOCALE_ID, numberAttribute, ViewChildren, Renderer2, Attribute } from '@angular/core';
 import * as i1$2 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, ObserveVisibilityDirective, signalHostClasses, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, take, merge, skipUntil, defer, fromEvent, partition, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription, Observable } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -1269,32 +1269,42 @@ class FilterOverlayPageOutletComponent {
     constructor() {
         this.filterOverlayRef = inject(FILTER_OVERLAY_REF);
         this.trackByRoute = (_, page) => page.route;
+        signalHostClasses({
+            'et-filter-overlay-page-outlet--backward': computed(() => {
+                const page = this.filterOverlayRef.currentPage();
+                return page?.route === '' || page?.route === '/';
+            }),
+            'et-filter-overlay-page-outlet--forward': computed(() => {
+                const page = this.filterOverlayRef.currentPage();
+                return page?.route !== '' && page?.route !== '/';
+            }),
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FilterOverlayPageOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: FilterOverlayPageOutletComponent, isStandalone: true, selector: "et-filter-overlay-page-outlet", host: { classAttribute: "et-filter-overlay-page-outlet" }, ngImport: i0, template: `
-    <ng-container *ngFor="let page of filterOverlayRef.pages(); trackBy: trackByRoute">
+    <ng-container *ngFor="let page of filterOverlayRef.pages; trackBy: trackByRoute">
       <div class="et-filter-overlay-page-outlet-page" etAnimatedLifecycle>
-        <ng-container *etAnimatedIf="page.isActive()">
+        <ng-container *etAnimatedIf="page === filterOverlayRef.currentPage()">
           <ng-container *ngComponentOutlet="page.component; inputs: page.inputs" />
         </ng-container>
       </div>
     </ng-container>
-  `, isInline: true, styles: [".et-filter-overlay-page-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-filter-overlay-page-outlet-page{--transition-easing: var(--ease-in-out-5);grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-filter-overlay-page-outlet-page>*{pointer-events:auto}.et-filter-overlay-page-outlet-page.et-animation-enter-from{transform:translate(100%);opacity:0}.et-filter-overlay-page-outlet-page.et-animation-leave-to{transform:translate(-100%);opacity:0}.et-filter-overlay-page-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--transition-easing),opacity .3s var(--transition-easing)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-filter-overlay-page-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden;--_et-filter-transform-from: translateX(100%);--_et-filter-transform-to: translateX(-100%)}.et-filter-overlay-page-outlet.et-filter-overlay-page-outlet--backward{--_et-filter-transform-from: translateX(-100%);--_et-filter-transform-to: translateX(100%)}.et-filter-overlay-page-outlet-page{--transition-easing: var(--ease-in-out-5);grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-filter-overlay-page-outlet-page>*{pointer-events:auto}.et-filter-overlay-page-outlet-page.et-animation-enter-from{transform:var(--_et-filter-transform-from);opacity:0}.et-filter-overlay-page-outlet-page.et-animation-leave-to{transform:var(--_et-filter-transform-to);opacity:0}.et-filter-overlay-page-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--transition-easing),opacity .3s var(--transition-easing)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: AnimatedIfDirective, selector: "[etAnimatedIf]", inputs: ["etAnimatedIf"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: FilterOverlayPageOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-filter-overlay-page-outlet', template: `
-    <ng-container *ngFor="let page of filterOverlayRef.pages(); trackBy: trackByRoute">
+    <ng-container *ngFor="let page of filterOverlayRef.pages; trackBy: trackByRoute">
       <div class="et-filter-overlay-page-outlet-page" etAnimatedLifecycle>
-        <ng-container *etAnimatedIf="page.isActive()">
+        <ng-container *etAnimatedIf="page === filterOverlayRef.currentPage()">
           <ng-container *ngComponentOutlet="page.component; inputs: page.inputs" />
         </ng-container>
       </div>
     </ng-container>
   `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-filter-overlay-page-outlet',
-                    }, imports: [NgFor, NgComponentOutlet, AnimatedIfDirective, AnimatedLifecycleDirective], hostDirectives: [], styles: [".et-filter-overlay-page-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden}.et-filter-overlay-page-outlet-page{--transition-easing: var(--ease-in-out-5);grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-filter-overlay-page-outlet-page>*{pointer-events:auto}.et-filter-overlay-page-outlet-page.et-animation-enter-from{transform:translate(100%);opacity:0}.et-filter-overlay-page-outlet-page.et-animation-leave-to{transform:translate(-100%);opacity:0}.et-filter-overlay-page-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--transition-easing),opacity .3s var(--transition-easing)}\n"] }]
-        }] });
+                    }, imports: [NgFor, NgComponentOutlet, AnimatedIfDirective, AnimatedLifecycleDirective], hostDirectives: [], styles: [".et-filter-overlay-page-outlet{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow-x:hidden;--_et-filter-transform-from: translateX(100%);--_et-filter-transform-to: translateX(-100%)}.et-filter-overlay-page-outlet.et-filter-overlay-page-outlet--backward{--_et-filter-transform-from: translateX(-100%);--_et-filter-transform-to: translateX(100%)}.et-filter-overlay-page-outlet-page{--transition-easing: var(--ease-in-out-5);grid-area:1 / 1 / 2 / 2;pointer-events:none}.et-filter-overlay-page-outlet-page>*{pointer-events:auto}.et-filter-overlay-page-outlet-page.et-animation-enter-from{transform:var(--_et-filter-transform-from);opacity:0}.et-filter-overlay-page-outlet-page.et-animation-leave-to{transform:var(--_et-filter-transform-to);opacity:0}.et-filter-overlay-page-outlet-page:is(.et-animation-enter-active,.et-animation-leave-active){transition:transform .3s var(--transition-easing),opacity .3s var(--transition-easing)}\n"] }]
+        }], ctorParameters: function () { return []; } });
 
 const FILTER_OVERLAY_BACK_OR_CLOSE_TOKEN = new InjectionToken('FILTER_OVERLAY_BACK_OR_CLOSE_TOKEN');
 class FilterOverlayBackOrCloseDirective {
@@ -5449,15 +5459,11 @@ class FilterOverlayRef {
         this._config = _config;
         this._currentRoute = signal('');
         this.currentRoute = this._currentRoute.asReadonly();
-        this.pages = computed(() => this._config.pages.map((page) => {
-            const isActive = computed(() => this.currentRoute() === this._buildRoute(page.route));
-            const data = {
-                ...page,
-                isActive,
-            };
-            return data;
-        }));
-        this.currentPage = computed(() => this.pages().find((page) => page.isActive()));
+        this.pages = this._config.pages;
+        this.currentPage = computed(() => {
+            const currentRoute = this.currentRoute();
+            return this.pages.find((page) => this._buildRoute(page.route) === currentRoute);
+        });
         this.currentPageTitle = computed(() => this.currentPage()?.title ?? null);
         this.canGoBack = computed(() => !!this.currentRoute());
         this.form = cloneFormGroup(this._config.form);
@@ -7307,6 +7313,8 @@ class SearchInputDirective {
         this.input._setShouldDisplayError(true);
     }
     _clear(event) {
+        if (this.input.value === null)
+            return;
         event?.preventDefault();
         event?.stopPropagation();
         this.input._updateValue(null);
@@ -7523,13 +7531,13 @@ class SearchInputComponent extends DecoratedInputBase {
         this.searchInput = inject(SEARCH_INPUT_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SearchInputComponent, isStandalone: true, selector: "et-search-input", host: { classAttribute: "et-search-input" }, usesInheritance: true, hostDirectives: [{ directive: SearchInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear($event)\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SearchInputComponent, isStandalone: true, selector: "et-search-input", host: { classAttribute: "et-search-input" }, usesInheritance: true, hostDirectives: [{ directive: SearchInputDirective }, { directive: InputDirective, inputs: ["autocomplete", "autocomplete", "placeholder", "placeholder"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keydown.escape)=\"searchInput._clear($event)\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-search-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-search-input',
-                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [SearchInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keyup.escape)=\"searchInput._clear($event)\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"] }]
+                    }, imports: [AsyncPipe, NativeInputRefDirective], hostDirectives: [SearchInputDirective, { directive: InputDirective, inputs: ['autocomplete', 'placeholder'] }], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<input\n  [attr.id]=\"input.id\"\n  [attr.aria-labelledby]=\"input.labelId$ | async\"\n  [required]=\"input.required$ | async\"\n  [disabled]=\"input.disabled$ | async\"\n  [attr.autocomplete]=\"input.autocomplete || null\"\n  [attr.placeholder]=\"input.placeholder || null\"\n  [attr.aria-describedby]=\"input.describedBy$ | async\"\n  (input)=\"searchInput._onInputInteraction($event)\"\n  (blur)=\"searchInput._controlTouched()\"\n  (keydown.escape)=\"searchInput._clear($event)\"\n  class=\"et-input-native-control et-search-input-native-control\"\n  type=\"search\"\n  etNativeInputRef\n/>\n\n<ng-content select=\"[etInputSuffix]\" />\n", styles: [".et-search-input input[type=search]::-webkit-search-cancel-button,.et-search-input input[type=search]::-webkit-search-decoration{-webkit-appearance:none}\n"] }]
         }] });
 
 class TextInputComponent extends DecoratedInputBase {
@@ -8726,8 +8734,14 @@ class ComboboxDirective {
         if (keyCode === ESCAPE) {
             if (isOpen) {
                 result.overlayOperation = 'close';
+                event.preventDefault();
+                event.stopPropagation();
             }
             else if (!isMultiple) {
+                if (this.currentFilter) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
                 result.setFilter = '';
                 result.optionAction = 'clear';
             }
@@ -9700,6 +9714,7 @@ class SelectDirective {
         }
         else if (keyCode === ESCAPE && !hasModifierKey(event)) {
             event.preventDefault();
+            event.stopPropagation();
             this.unmountSelectBody();
         }
         else if (keyCode === ENTER || keyCode === SPACE) {
@@ -10080,9 +10095,12 @@ class SelectionListOptionDirective {
         this.elementRef = inject(ElementRef);
         this._value = signal(undefined);
         this._disabled = signal(false);
+        this._isResetOption = signal(false);
         this.selected = computed(() => {
             const value = this.input.value;
-            return (Array.isArray(value) && value.includes(this.value)) || value === this.value;
+            return ((Array.isArray(value) && value.includes(this.value)) ||
+                value === this.value ||
+                (this.field.multiple && this.isResetOption && Array.isArray(value) && value.length === 0));
         });
     }
     get value() {
@@ -10097,6 +10115,12 @@ class SelectionListOptionDirective {
     set disabled(value) {
         this._disabled.set(value);
     }
+    get isResetOption() {
+        return this._isResetOption();
+    }
+    set isResetOption(value) {
+        this._isResetOption.set(value);
+    }
     focus() {
         this.elementRef.nativeElement.focus();
     }
@@ -10124,6 +10148,9 @@ class SelectionListOptionDirective {
             if (!Array.isArray(this.input.value)) {
                 this.input._updateValue([this.value]);
             }
+            else if (this.isResetOption) {
+                this.input._updateValue([]);
+            }
             else if (this.selected()) {
                 this.input._updateValue(this.input.value.filter((value) => value !== this.value));
             }
@@ -10136,7 +10163,7 @@ class SelectionListOptionDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionListOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.5", type: SelectionListOptionDirective, isStandalone: true, inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "_onInputInteraction($event)", "blur": "_controlTouched()" }, properties: { "class.et-selection-list-option--selected": "selected()", "class.et-selection-list-option--disabled": "disabled || input.disabled", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled || input.disabled" }, classAttribute: "et-selection-list-option" }, providers: [{ provide: SELECTION_LIST_OPTION, useExisting: SelectionListOptionDirective }], exportAs: ["etSelectionListOption"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.5", type: SelectionListOptionDirective, isStandalone: true, inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], isResetOption: ["isResetOption", "isResetOption", booleanAttribute] }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "_onInputInteraction($event)", "blur": "_controlTouched()" }, properties: { "class.et-selection-list-option--selected": "selected()", "class.et-selection-list-option--disabled": "disabled || input.disabled", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled || input.disabled" }, classAttribute: "et-selection-list-option" }, providers: [{ provide: SELECTION_LIST_OPTION, useExisting: SelectionListOptionDirective }], exportAs: ["etSelectionListOption"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionListOptionDirective, decorators: [{
             type: Directive,
@@ -10157,11 +10184,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     },
                 }]
         }], propDecorators: { value: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], isResetOption: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 const SELECTION_LIST_FIELD = new InjectionToken('ET_SELECTION_LIST_FIELD_DIRECTIVE_TOKEN');
@@ -10198,7 +10227,7 @@ class SelectionListFieldDirective {
             this.multiple &&
             !this._keyManager?.isTyping() &&
             hasModifierKey(event, 'ctrlKey')) {
-            const shouldSelect = this._options()?.some((option) => !option?.disabled && !option?.selected());
+            const shouldSelect = this._options()?.some((option) => !option?.disabled && !option?.selected() && !option?.isResetOption);
             event.preventDefault();
             this._setAllOptionsSelected(shouldSelect ?? true);
         }
@@ -10248,7 +10277,7 @@ class SelectionListFieldDirective {
         if (!options)
             return;
         if (shouldSelectAll) {
-            const values = options.filter((o) => !o.disabled).map((o) => o.value);
+            const values = options.filter((o) => !o.disabled && !o.isResetOption).map((o) => o.value);
             this.input._updateValue(values);
         }
         else {
@@ -10312,7 +10341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 
 class SelectionListOptionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectionListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectionListOptionComponent, isStandalone: true, selector: "et-selection-list-option", hostDirectives: [{ directive: SelectionListOptionDirective, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectionListOptionComponent, isStandalone: true, selector: "et-selection-list-option", hostDirectives: [{ directive: SelectionListOptionDirective, inputs: ["value", "value", "disabled", "disabled", "isResetOption", "isResetOption"] }], ngImport: i0, template: `
     <div class="et-selection-list-option-content">
       <ng-content />
     </div>
@@ -10332,7 +10361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
     <div class="et-selection-list-option-state">
       <div class="et-selection-list-option-state-check"></div>
     </div>
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], hostDirectives: [{ directive: SelectionListOptionDirective, inputs: ['value', 'disabled'] }], styles: [":where(.et-selection-list-option){--et-selection-list-option-state-size: 25px;--et-selection-list-option-state-check-size: 10px;--et-selection-list-option-state-border-color: #e5e5e5;--et-selection-list-option-state-state-color: #e5e5e5;--et-selection-list-option-state-indeterminate-width: 10px;--et-selection-list-option-state-indeterminate-height: 2px}.et-selection-list-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px}.et-selection-list-field--multiple .et-selection-list-option-state,.et-selection-list-field--multiple .et-selection-list-option-state .et-selection-list-option-state-check{border-radius:0%}.et-selection-list-option-state{inline-size:var(--et-selection-list-option-state-size);block-size:var(--et-selection-list-option-state-size);border:1px solid var(--et-selection-list-option-state-border-color);display:inline-grid;position:relative;align-items:center;border-radius:50%;justify-items:center}.et-selection-list-option-state-check{inline-size:var(--et-selection-list-option-state-check-size);block-size:var(--et-selection-list-option-state-check-size);border-radius:50%}.et-selection-list-option--selected .et-selection-list-option-state-check{background-color:var(--et-selection-list-option-state-state-color)}\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], hostDirectives: [{ directive: SelectionListOptionDirective, inputs: ['value', 'disabled', 'isResetOption'] }], styles: [":where(.et-selection-list-option){--et-selection-list-option-state-size: 25px;--et-selection-list-option-state-check-size: 10px;--et-selection-list-option-state-border-color: #e5e5e5;--et-selection-list-option-state-state-color: #e5e5e5;--et-selection-list-option-state-indeterminate-width: 10px;--et-selection-list-option-state-indeterminate-height: 2px}.et-selection-list-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px}.et-selection-list-field--multiple .et-selection-list-option-state,.et-selection-list-field--multiple .et-selection-list-option-state .et-selection-list-option-state-check{border-radius:0%}.et-selection-list-option-state{inline-size:var(--et-selection-list-option-state-size);block-size:var(--et-selection-list-option-state-size);border:1px solid var(--et-selection-list-option-state-border-color);display:inline-grid;position:relative;align-items:center;border-radius:50%;justify-items:center}.et-selection-list-option-state-check{inline-size:var(--et-selection-list-option-state-check-size);block-size:var(--et-selection-list-option-state-check-size);border-radius:50%}.et-selection-list-option--selected .et-selection-list-option-state-check{background-color:var(--et-selection-list-option-state-state-color)}\n"] }]
         }] });
 
 const SelectionListImports = [SelectionListFieldComponent, SelectionListOptionComponent];