@ethlete/cdk 4.35.0 → 4.37.0

package/lib/components/overlay/components/overlay/utils/overlay-handler.d.ts

@@ -36,7 +36,7 @@ export type OverlayHandlerWithQueryParamLifecycle<Q = string> = {
     /** Close the overlay and remove the query param  */
     close: () => void;
 };
-export type CreateOverlayHandlerWithQueryParamLifecycleConfig<T> = Omit<OverlayConfig<unknown>, 'positions' | 'data'> & {
+export type CreateOverlayHandlerWithQueryParamLifecycleConfig<T> = Omit<OverlayConfig<unknown>, 'positions' | 'data' | 'closeOnNavigation'> & {
     /** The overlay component  */
     component: ComponentType<T>;
     /** The overlay positions using the position builder provided via argument  */
@@ -47,7 +47,7 @@ export type CreateOverlayHandlerWithQueryParamLifecycleConfig<T> = Omit<OverlayC
 export declare const OVERLAY_QUERY_PARAM_INPUT_NAME = "overlayQueryParam";
 /**
  * This handler will automatically open the overlay when the query param is present.
- * The overlay can contain a required input with the name `overlayQueryParam` to receive the query param value.
+ * The overlay can contain a input or model with the name `overlayQueryParam` to receive the query param value.
  *
  * If you need to transfer more information (eg. a second query param), you need to combine them into a single query param string.
  * You can then split the string inside the overlay component using computed signals.
@@ -57,4 +57,5 @@ export declare const OVERLAY_QUERY_PARAM_INPUT_NAME = "overlayQueryParam";
 export declare const createOverlayHandlerWithQueryParamLifecycle: <TComponent, TQueryParam extends string = string, TResult = unknown>(config: CreateOverlayHandlerWithQueryParamLifecycleConfig<TComponent>) => {
     (innerConfig?: CreateOverlayHandlerInnerConfig<TResult>): OverlayHandlerWithQueryParamLifecycle<TQueryParam>;
     injectOverlayRef(): OverlayRef<TComponent, TResult>;
+    updateQueryParam(value: TQueryParam): void;
 };

package/lib/components/picture/types/picture.types.d.ts

@@ -1,15 +1,42 @@
+/**
+ * A source to be used in a picture element.
+ * @see https://www.mediaevent.de/html/picture.html
+ * @see https://web.dev/learn/design/responsive-images
+ */
 export interface PictureSource {
     /**
      * The mime type of the image.
+     * If not provided, it will be inferred from the URL.
+     * If it cannot be inferred, it will be `null` and a error will be logged to the console without throwing.
      * @example `image/jpeg`
      */
-    type: string | null;
+    type?: string | null;
     /**
      * The source set of the image. Can be either a single URL or a comma-separated list of URLs.
+     * If a width descriptor is provided (eg. 200w), you must also set the `sizes` property.
+     * If a density descriptor is provided (eg. 2x), the browser will automatically select the correct image based on the device's pixel density.
+     *
+     * **Note**: You can provide either a width descriptor or a density descriptor, but not both.
      * @example `https://example.com/image.jpg`
-     * @example `https://example.com/image.jpg, https://example.com/image@2x.jpg`
+     * @example `https://example.com/image.jpg 1x, https://example.com/image@2x.jpg 2x`
+     * @example `https://example.com/image.jpg 300w, https://example.com/image600.jpg 600w`
      */
     srcset: string;
+    /**
+     * The sizes attribute of the image.
+     *
+     * **Note**: Only required if the `srcset` property contains width descriptors.
+     * @example `100vw` // The image will take up the full width of the viewport
+     * @example `(min-width: 800px) 50vw, 100vw` // The image will take up 50% of the viewport width if the viewport is at least 800px wide, otherwise it will take up the full width
+     */
+    sizes?: string | null;
+    /**
+     * The media query to which the source applies.
+     * If the media query applies, the source will be used.
+     * @example `(min-width: 800px)` // Only applies if the viewport is at least 800px wide
+     * @example `(min-width: 800px) and (orientation: landscape) and (prefers-color-scheme: dark)` // Only applies if the viewport is at least 800px wide, is in landscape orientation and prefers dark colors
+     */
+    media?: string | null;
 }
 export interface PictureConfig {
     baseUrl?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.35.0",
+  "version": "4.37.0",
   "exports": {
     ".": {
       "css": "./src/lib/styles/index.css",