@ethlete/cdk 3.20.0 → 3.21.0

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, 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 { 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, Pipe, Renderer2, Attribute } from '@angular/core';
 import * as i1$2 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, signalHostAttributes, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, 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, signalHostAttributes, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, inferMimeType, 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, Observable, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -9068,8 +9068,11 @@ class ComboboxOptionComponent {
     ignoreBlur() {
         this.combobox._ignoreNextBlurEvent();
     }
+    setActiveByHover() {
+        this.combobox._activeSelectionModel.setActiveOption(this.option);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-option" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { attributes: { "role": "option" }, listeners: { "mousedown": "ignoreBlur()", "click": "selectOption()", "mouseenter": "setActiveByHover()" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-option" }, providers: [
             {
                 provide: COMBOBOX_OPTION_TOKEN,
                 useExisting: ComboboxOptionComponent,
@@ -9082,6 +9085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         class: 'et-combobox-option',
                         '(mousedown)': 'ignoreBlur()',
                         '(click)': 'selectOption()',
+                        '(mouseenter)': 'setActiveByHover()',
                         '[attr.id]': 'id',
                         role: 'option',
                     }, imports: [AsyncPipe, NgIf, NgTemplateOutlet, NgComponentOutlet], hostDirectives: [], providers: [
@@ -9471,8 +9475,11 @@ class SelectOptionDirective {
     _setActive(isActive) {
         this._isActive$.next(isActive);
     }
+    setActiveByHover() {
+        this._select._setActiveOption(this);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "click": "setSelectValue()", "etObserveContent": "_updateViewValue()" }, properties: { "attr.id": "id", "attr.aria-disabled": "disabled", "class.et-select-option--disabled": "disabled" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectOptionDirective, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, host: { attributes: { "role": "option" }, listeners: { "click": "setSelectValue()", "mouseenter": "setActiveByHover()", "etObserveContent": "_updateViewValue()" }, properties: { "attr.id": "id", "attr.aria-disabled": "disabled", "class.et-select-option--disabled": "disabled" } }, providers: [
             {
                 provide: SELECT_OPTION_TOKEN,
                 useExisting: SelectOptionDirective,
@@ -9494,6 +9501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         '[attr.aria-disabled]': 'disabled',
                         '[class.et-select-option--disabled]': 'disabled',
                         '(click)': 'setSelectValue()',
+                        '(mouseenter)': 'setActiveByHover()',
                         '(etObserveContent)': '_updateViewValue()',
                         role: 'option',
                     },
@@ -11449,6 +11457,31 @@ const provideImageConfig = (config = {}) => {
     };
 };
 
+const normalizeSource = (source) => {
+    if (typeof source === 'string') {
+        return { type: inferMimeType(source), srcset: source };
+    }
+    else {
+        const mimeType = source.type && source.type !== '' ? source.type : inferMimeType(source.srcset);
+        return { type: mimeType, srcset: source.srcset };
+    }
+};
+
+class NormalizeSourcePipe {
+    constructor() {
+        this.transform = normalizeSource;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NormalizeSourcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: NormalizeSourcePipe, isStandalone: true, name: "normalizeSource" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NormalizeSourcePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'normalizeSource',
+                    standalone: true,
+                }]
+        }] });
+
 class PictureComponent {
     constructor() {
         this.pictureData = inject(PictureDataDirective);
@@ -11457,9 +11490,6 @@ class PictureComponent {
         this.trackBySrc = (_, item) => item.srcset;
     }
     combineWithConfig(src) {
-        if (isDevMode() && src.type === '') {
-            console.warn(`The type attribute is missing for the following source`, src.srcset, this);
-        }
         if (!this.config?.baseUrl || src.srcset.startsWith('http')) {
             return src;
         }
@@ -11470,11 +11500,11 @@ class PictureComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source | normalizeSource) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source | normalizeSource) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: NormalizeSourcePipe, name: "normalizeSource" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-picture', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgForOf, NgClass, NgIf, LetDirective], host: {
+            args: [{ selector: 'et-picture', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgForOf, NgClass, NgIf, LetDirective, NormalizeSourcePipe], host: {
                         class: 'et-picture',
                     }, hostDirectives: [
                         {
@@ -11493,7 +11523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                                 'sizes',
                             ],
                         },
-                    ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n" }]
+                    ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source | normalizeSource) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source | normalizeSource) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n" }]
         }], propDecorators: { sources: [{
                 type: Input
             }] } });