@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/pagination/services/pagination-head.service.ts

@@ -1,86 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, OnDestroy } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-import { PaginationHeadServiceConfig } from '../types';
-
-@Injectable()
-export class PaginationHeadService implements OnDestroy {
-  private _config: PaginationHeadServiceConfig | null = null;
-  private _document = inject(DOCUMENT);
-  private _titleService = inject(Title);
-  private _router = inject(Router);
-  private _head = this._document.getElementsByTagName('head')[0];
-
-  private get config(): PaginationHeadServiceConfig {
-    return this._config ?? { titleTemplate: null, firstPageTitle: null, addCanonicalTag: false };
-  }
-
-  set addCanonicalTag(v: boolean) {
-    this._config = { ...this.config, addCanonicalTag: v };
-  }
-
-  set titleTemplate(v: string | null) {
-    this._config = { ...this.config, titleTemplate: v };
-  }
-
-  set firstPageTitle(v: string | null) {
-    this._config = { ...this.config, firstPageTitle: v };
-  }
-
-  ngOnDestroy(): void {
-    const element = this._getCanonicalElement(false);
-
-    if (element) {
-      this._removeCanonicalElement(element);
-    }
-  }
-
-  _updateHead(page: number) {
-    const { titleTemplate, addCanonicalTag, firstPageTitle } = this.config;
-
-    if (titleTemplate && !titleTemplate.includes('%s')) {
-      throw new Error('Title template must contain "%s" placeholder');
-    }
-
-    const title =
-      page === 1 && firstPageTitle
-        ? firstPageTitle
-        : titleTemplate
-          ? titleTemplate.replace('%s', page.toString())
-          : null;
-
-    if (title) {
-      this._titleService.setTitle(title);
-    }
-
-    if (addCanonicalTag) {
-      const urlTree = this._router.createUrlTree([], {
-        queryParams: { page: page === 1 ? null : page },
-        queryParamsHandling: 'merge',
-      });
-
-      const relativeUrl = this._router.serializeUrl(urlTree);
-      const canonicalUrl = `${window.location.origin}${relativeUrl}`;
-
-      const element = this._getCanonicalElement(true);
-      element.setAttribute('rel', 'canonical');
-      element.setAttribute('href', canonicalUrl);
-      this._head?.appendChild(element);
-    }
-  }
-
-  private _getCanonicalElement<T extends boolean, R extends T extends true ? HTMLElement : HTMLElement | null>(
-    createIfNotExisting: T,
-  ) {
-    let element = this._document.querySelector(`link[rel='canonical']`) || null;
-    if (element === null && createIfNotExisting) {
-      element = this._document.createElement('link') as HTMLLinkElement;
-    }
-    return element as R;
-  }
-
-  private _removeCanonicalElement(element: Element) {
-    this._head?.removeChild(element);
-  }
-}

package/src/lib/components/pagination/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './pagination-storybook.component';

package/src/lib/components/pagination/stories/components/pagination-storybook.component.ts

@@ -1,90 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { PaginationComponent } from '../../components/pagination';
-
-@Component({
-  selector: 'et-sb-pagination',
-  template: `
-    <et-pagination
-      [pageControl]="pageControl"
-      [totalPages]="totalPages"
-      [headTitleTemplate]="headTitleTemplate"
-      [headFirstPageTitle]="headFirstPageTitle"
-      [headAddCanonicalTag]="headAddCanonicalTag"
-    />
-  `,
-  styles: [
-    `
-      .et-pagination .et-pagination-list {
-        display: flex;
-        justify-content: center;
-        gap: 8px;
-        list-style: none;
-
-        .et-pagination-previous a,
-        .et-pagination-next a,
-        .et-pagination-first a,
-        .et-pagination-last a {
-          position: relative;
-          width: 10px;
-          display: inline-block;
-          height: 100%;
-
-          &::before {
-            position: absolute;
-            inset: 0;
-          }
-        }
-
-        .et-pagination-previous a::before {
-          content: '<';
-        }
-
-        .et-pagination-next a::before {
-          content: '>';
-        }
-
-        .et-pagination-first {
-          margin-right: 8px;
-
-          a::before {
-            content: '<<';
-          }
-        }
-
-        .et-pagination-last a::before {
-          content: '>>';
-        }
-
-        .et-pagination-current a {
-          font-weight: bold;
-          text-decoration: none;
-          cursor: default;
-        }
-      }
-    `,
-  ],
-  standalone: true,
-  imports: [PaginationComponent],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginationStorybookComponent {
-  pageControl = new FormControl<number | null>(1);
-  pageChangeScrollAnchor: HTMLElement | null = null;
-
-  @Input()
-  totalPages = 2;
-
-  @Input()
-  headTitleTemplate = null;
-
-  @Input()
-  headFirstPageTitle = null;
-
-  @Input()
-  headAddCanonicalTag = false;
-
-  @Input()
-  ariaLabel = 'Pagination';
-}

package/src/lib/components/pagination/stories/pagination.docs.mdx

@@ -1,113 +0,0 @@
-# Pagination
-
-Provides a way to navigate through a paginated list of items.
-
-## Code examples
-
-Below you can find example code and usefull documentation for creating pagination.
-
-### Basic usage
-
-```html
-<et-pagination [pageControl]="pageControl" [totalPages]="totalPages"></et-pagination>
-```
-
-### SEO
-
-The pagination component creates SEO friendly urls by default.
-In addition to that, you can add the `headAddCanonicalTag` attribute which will add and update the canonical tag inside the head of the page.
-**Do not enable this option for multiple pagination components on the same page**.
-
-You can also provide a `headTitleTemplate` attribute which will be used to generate the title of the page.
-The provided string **must** contain a `%s` placeholder which will be replaced by the current page number.
-
-For naming the first page, you can provide a `headFirstPageTitle` attribute.
-
-```html
-<et-pagination
-  [pageControl]="pageControl"
-  [totalPages]="totalPages"
-  headAddCanonicalTag
-  headTitleTemplate="Stuff - Page %s"
-  headFirstPageTitle="Stuff"
-></et-pagination>
-```
-
-### Auto scroll to element on page change
-
-You can provide an HTMLElement via `pageChangeScrollAnchor` attribute which will get scrolled to when the page changes.
-This uses the `scrollIntoView` method of the HTMLElement.
-
-```html
-<div #myLongPaginatedContent></div>
-
-<et-pagination
-  [pageControl]="pageControl"
-  [totalPages]="totalPages"
-  [pageChangeScrollAnchor]="myLongPaginatedContent"
-></et-pagination>
-```
-
-## Styling
-
-The pagination component provides css classes & variables for styling.
-
-#### `et-pagination`
-
-> The pagination container.
-
-#### `et-pagination-nav`
-
-> The pagination `nav` container.
-
-#### `et-pagination-list`
-
-> The pagination `ul` container.
-
-#### `et-pagination-list-item`
-
-> The pagination `li` element.
-
-#### `et-pagination-hot-link`
-
-> Applied to the `li` element when it's a link to either the very first/last or the previous/next page.
-
-#### `et-pagination-page-link`
-
-> Applied to the `li` element when it's a link to a specific page.
-
-#### `et-pagination-item-disabled`
-
-> Applied to the `li` element when it's disabled. (e.g. the previous page link when on the first page)
-
-#### `et-pagination-previous`
-
-> Applied to the `li` element when it's the previous page link.
-
-#### `et-pagination-next`
-
-> Applied to the `li` element when it's the next page link.
-
-#### `et-pagination-first`
-
-> Applied to the `li` element when it's the first page link.
-
-#### `et-pagination-last`
-
-> Applied to the `li` element when it's the last page link.
-
-#### `et-pagination-current`
-
-> Applied to the `li` element when it's the current page link.
-
-#### `et-pagination-page-number-close`
-
-> Applied to the `li` element when it's a page link that's close to the current page. (e.g. pages 1 and 3 if 2 is current)
-
-#### `et-pagination-page-number-far`
-
-> Applied to the `li` element when it's a page link that's far from the current page. (e.g. pages 1 and 5 if 3 is current)
-
-#### `et-pagination-anchor`
-
-> Applied to the `a` element.

package/src/lib/components/pagination/stories/pagination.stories.ts

@@ -1,57 +0,0 @@
-import { Meta, StoryFn } from '@storybook/angular';
-import { PaginationStorybookComponent } from './components';
-import CustomMDXDocumentation from './pagination.docs.mdx';
-
-export default {
-  title: 'CDK/Pagination',
-  component: PaginationStorybookComponent,
-  argTypes: {
-    ariaLabel: {
-      control: {
-        type: 'text',
-      },
-    },
-    headTitleTemplate: {
-      control: {
-        type: 'text',
-      },
-    },
-    headFirstPageTitle: {
-      control: {
-        type: 'text',
-      },
-    },
-    headAddCanonicalTag: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    totalPages: {
-      control: {
-        type: 'number',
-      },
-    },
-  },
-  args: {
-    ariaLabel: 'Pagination',
-    headAddCanonicalTag: false,
-    headFirstPageTitle: null,
-    headTitleTemplate: null,
-    totalPages: 2,
-    pageChangeScrollAnchor: null,
-  },
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-} as Meta<PaginationStorybookComponent>;
-
-const Template: StoryFn<PaginationStorybookComponent> = (args) => ({
-  props: args,
-});
-
-export const Default = {
-  render: Template,
-  args: {},
-};

package/src/lib/components/pagination/types/pagination.types.ts

@@ -1,40 +0,0 @@
-export interface PaginateOptions {
-  currentPage: number;
-  totalPageCount: number;
-
-  /**
-   * @default false
-   */
-  omitFirstLast?: boolean;
-
-  /**
-   * @default false
-   */
-  omitPreviousNext?: boolean;
-
-  /**
-   * @default 2
-   */
-  pagesBeforeAfter?: number;
-
-  /**
-   * @default 1
-   */
-  firstPage?: number;
-}
-
-export interface PaginationItem {
-  current: boolean;
-  page: number;
-  ariaLabel: string;
-  disabled: boolean;
-  type: 'page' | 'hotLink';
-  explicitType: 'first' | 'last' | 'previous' | 'next' | 'current' | 'page-number-close' | 'page-number-far';
-  url: string;
-}
-
-export interface PaginationHeadServiceConfig {
-  firstPageTitle: string | null;
-  titleTemplate: string | null;
-  addCanonicalTag: boolean;
-}

package/src/lib/components/pagination/utils/pagination.util.ts

@@ -1,116 +0,0 @@
-import { clamp } from '@ethlete/core';
-import { PaginateOptions, PaginationItem } from '../types';
-
-export const paginate = (value?: PaginateOptions | null) => {
-  if (!value) {
-    return null;
-  }
-
-  const { omitFirstLast = false, omitPreviousNext = false, pagesBeforeAfter = 2, firstPage = 1 } = value;
-
-  const pages: PaginationItem[] = [];
-  const activePage = clamp(value.currentPage, firstPage, value.totalPageCount);
-
-  if (value.totalPageCount === 0) {
-    return null;
-  }
-
-  const currentUrl = new URL(window.location.href);
-
-  const createUrl = (page: number) => {
-    const url = new URL(currentUrl.href);
-
-    if (page === 1) {
-      url.searchParams.delete('page');
-    } else {
-      url.searchParams.set('page', page.toString());
-    }
-
-    return url.toString();
-  };
-
-  if (!omitFirstLast) {
-    pages.push({
-      page: firstPage,
-      current: false,
-      ariaLabel: 'First page',
-      disabled: activePage === firstPage,
-      type: 'hotLink',
-      explicitType: 'first',
-      url: createUrl(firstPage),
-    });
-  }
-
-  if (!omitPreviousNext) {
-    pages.push({
-      page: activePage - 1,
-      current: false,
-      ariaLabel: `Previous page`,
-      disabled: activePage === 1,
-      type: 'hotLink',
-      explicitType: 'previous',
-      url: createUrl(activePage - 1),
-    });
-  }
-
-  let pagesBefore = activePage - pagesBeforeAfter;
-  let pagesAfter = activePage + pagesBeforeAfter;
-
-  if (pagesBefore < firstPage) {
-    pagesAfter += firstPage - pagesBefore;
-    pagesBefore = firstPage;
-  }
-
-  if (pagesAfter > value.totalPageCount) {
-    pagesBefore -= pagesAfter - value.totalPageCount;
-    pagesAfter = value.totalPageCount;
-  }
-
-  // add N pages before and after active page
-  for (let i = pagesBefore; i <= pagesAfter; i++) {
-    if (i > firstPage - 1 && i <= value.totalPageCount) {
-      const explicitType =
-        i === activePage
-          ? 'current'
-          : i === activePage - 1 || i === activePage + 1
-            ? 'page-number-close'
-            : 'page-number-far';
-
-      pages.push({
-        page: i,
-        current: i === activePage,
-        ariaLabel: `Page ${i}`,
-        disabled: false,
-        type: 'page',
-        explicitType,
-        url: createUrl(i),
-      });
-    }
-  }
-
-  if (!omitPreviousNext) {
-    pages.push({
-      page: activePage + 1,
-      current: false,
-      ariaLabel: `Next page`,
-      disabled: activePage === value.totalPageCount,
-      type: 'hotLink',
-      explicitType: 'next',
-      url: createUrl(activePage + 1),
-    });
-  }
-
-  if (!omitFirstLast) {
-    pages.push({
-      page: value.totalPageCount,
-      current: false,
-      ariaLabel: `Last page`,
-      disabled: activePage === value.totalPageCount,
-      type: 'hotLink',
-      explicitType: 'last',
-      url: createUrl(value.totalPageCount),
-    });
-  }
-
-  return pages;
-};

package/src/lib/components/picture/components/picture/picture.component.html

@@ -1,29 +0,0 @@
-<figure [ngClass]="figureClass()" class="et-picture-figure">
-  <picture [ngClass]="pictureClass()" class="et-picture-picture">
-    @for (source of sourcesWithConfig(); track source.srcset) {
-      <source [type]="source.type" [attr.srcset]="source.srcset" [attr.sizes]="sizes()" />
-    }
-
-    @if (defaultSourceWithConfig(); as source) {
-      <img
-        #img
-        [attr.loading]="hasPriority() ? 'eager' : 'lazy'"
-        [attr.fetchpriority]="hasPriority() ? 'high' : 'auto'"
-        [ngClass]="imgClass()"
-        [attr.srcset]="source.srcset"
-        [attr.type]="source.type"
-        [attr.alt]="alt()"
-        [attr.width]="width()"
-        [attr.height]="height()"
-        [attr.sizes]="sizes()"
-        class="et-picture-img"
-      />
-    }
-  </picture>
-
-  @if (figcaption()) {
-    <figcaption [ngClass]="figcaptionClass()" class="et-picture-figcaption">
-      {{ figcaption() }}
-    </figcaption>
-  }
-</figure>

package/src/lib/components/picture/components/picture/picture.component.ts

@@ -1,82 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-  booleanAttribute,
-  computed,
-  inject,
-  input,
-  numberAttribute,
-  viewChild,
-} from '@angular/core';
-import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
-import { NgClassType } from '@ethlete/core';
-import { fromEvent, map, of, switchMap } from 'rxjs';
-import { PictureSource } from '../../types/picture.types';
-import { IMAGE_CONFIG_TOKEN, normalizePictureSizes, normalizePictureSource } from '../../utils/picture.utils';
-
-@Component({
-  selector: 'et-picture',
-  templateUrl: './picture.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [NgClass],
-  host: {
-    class: 'et-picture',
-  },
-})
-export class PictureComponent {
-  _config = inject(IMAGE_CONFIG_TOKEN, { optional: true });
-
-  sources = input<Array<PictureSource | string>>([]);
-  hasPriority = input(false, { transform: booleanAttribute });
-  imgClass = input<NgClassType>(null);
-  figureClass = input<NgClassType>(null);
-  figcaptionClass = input<NgClassType>(null);
-  pictureClass = input<NgClassType>(null);
-  defaultSrc = input<PictureSource | string | null>(null);
-  alt = input<string | null>(null);
-  figcaption = input<string | null>(null);
-  width = input(null, { transform: numberAttribute });
-  height = input(null, { transform: numberAttribute });
-  sizes = input<string | null, string[] | string | null>(null, {
-    transform: (v) => normalizePictureSizes(v),
-  });
-
-  img = viewChild<ElementRef<HTMLImageElement>>('img');
-  img$ = toObservable(this.img).pipe(map((ref) => ref?.nativeElement ?? null));
-
-  imgLoaded = outputFromObservable(
-    this.img$.pipe(switchMap((img) => (img ? fromEvent(img, 'load').pipe(map(() => true)) : of(false)))),
-  );
-  imgError = outputFromObservable(
-    this.img$.pipe(switchMap((img) => (img ? fromEvent(img, 'error').pipe(map(() => true)) : of(false)))),
-  );
-
-  sourcesWithConfig = computed(() => {
-    const sources = this.sources();
-
-    return sources.map((source) => this._combineWithConfig(normalizePictureSource(source)));
-  });
-
-  defaultSourceWithConfig = computed(() => {
-    const defaultSrc = this.defaultSrc();
-    return defaultSrc ? this._combineWithConfig(normalizePictureSource(defaultSrc)) : null;
-  });
-
-  _combineWithConfig(src: PictureSource) {
-    if (!this._config?.baseUrl || src.srcset.startsWith('http')) {
-      return src;
-    }
-
-    const shouldAppendSlash = !this._config.baseUrl.endsWith('/') && !src.srcset.startsWith('/');
-
-    return {
-      ...src,
-      srcset: `${this._config.baseUrl}${shouldAppendSlash ? '/' : ''}${src.srcset}`,
-    };
-  }
-}

package/src/lib/components/picture/picture.imports.ts

@@ -1,3 +0,0 @@
-import { PictureComponent } from './components/picture';
-
-export const PictureImports = [PictureComponent] as const;

package/src/lib/components/picture/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './picture-storybook.component';

package/src/lib/components/picture/stories/components/picture-storybook.component.ts

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { PictureImports } from '../../picture.imports';
-
-@Component({
-  selector: 'et-sb-picture',
-  template: `<div class="mb-4 flex justify-center px-14">
-    <et-picture [alt]="alt" [defaultSrc]="defaultSrc" [width]="width" [height]="height" [hasPriority]="hasPriority" />
-  </div>`,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [PictureImports],
-})
-export class StorybookPictureComponent {
-  defaultSrc = '';
-  alt = '';
-  width = 0;
-  height = 0;
-  hasPriority = false;
-}