@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/scrollable/components/scrollable-placeholder/scrollable-placeholder.component.html

@@ -1,38 +0,0 @@
-<ng-template>
-  <ng-content />
-</ng-template>
-
-<div class="et-scrollable-placeholder-wrapper">
-  <div [ngClass]="scrollableClass()" class="et-scrollable-placeholder-container">
-    <div class="et-scroll-observer-first-element"></div>
-    @for (
-      _ of repeat();
-      track index;
-      let index = $index;
-      let even = $even;
-      let odd = $odd;
-      let first = $first;
-      let last = $last
-    ) {
-      <ng-container *ngTemplateOutlet="contentTemplate(); context: { index, even, odd, first, last }" />
-    }
-    <div class="et-scroll-observer-last-element"></div>
-  </div>
-
-  @if (renderMasks()) {
-    <div class="et-scrollable-masks">
-      @if (renderStartMask()) {
-        <div class="et-scrollable-mask et-scrollable-mask--start"></div>
-      }
-      @if (renderEndMask()) {
-        <div class="et-scrollable-mask et-scrollable-mask--end"></div>
-      }
-    </div>
-  }
-
-  @if (overlayTemplate(); as overlayTemplate) {
-    <div class="et-scrollable-placeholder-overlay">
-      <ng-container *ngTemplateOutlet="overlayTemplate" />
-    </div>
-  }
-</div>

package/src/lib/components/scrollable/components/scrollable-placeholder/scrollable-placeholder.component.scss

@@ -1,61 +0,0 @@
-:where(.et-scrollable-placeholder) {
-  --mask: #121212 0, transparent 100%;
-  --mask-size: 25px;
-
-  position: relative;
-  display: block;
-}
-
-.et-scrollable-placeholder {
-  .et-scroll-observer-first-element,
-  .et-scroll-observer-last-element {
-    position: absolute;
-  }
-
-  .et-scrollable-mask {
-    inline-size: var(--mask-size);
-    block-size: 100%;
-    position: absolute;
-  }
-
-  .et-scrollable-mask--start {
-    background: linear-gradient(to right, var(--mask));
-    inset-block-start: 0;
-    inset-inline: 0 0;
-  }
-
-  .et-scrollable-mask--end {
-    background: linear-gradient(to left, var(--mask));
-    inset-inline: calc(100% - var(--mask-size)) 100%;
-    inset-block-start: 0;
-  }
-
-  .et-scrollable-masks {
-    grid-row: 1 / 1;
-    grid-column: 1 / 1;
-    pointer-events: none;
-  }
-}
-
-.et-scrollable-placeholder-overlay {
-  grid-row: 1 / 1;
-  grid-column: 1 / 1;
-  display: grid;
-}
-
-.et-scrollable-placeholder-wrapper {
-  display: grid;
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-.et-scrollable-placeholder-container {
-  display: grid;
-  position: relative;
-  grid-row: 1 / 1;
-  grid-column: 1 / 1;
-  overflow: hidden;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}

package/src/lib/components/scrollable/components/scrollable-placeholder/scrollable-placeholder.component.ts

@@ -1,40 +0,0 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  TemplateRef,
-  ViewEncapsulation,
-  booleanAttribute,
-  computed,
-  contentChild,
-  input,
-  numberAttribute,
-} from '@angular/core';
-import { NgClassType } from '@ethlete/core';
-import { SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN } from '../../directives/scrollable-placeholder-item-template';
-import { SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN } from '../../directives/scrollable-placeholder-overlay-template';
-
-@Component({
-  selector: 'et-scrollable-placeholder',
-  templateUrl: './scrollable-placeholder.component.html',
-  styleUrl: './scrollable-placeholder.component.scss',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [NgTemplateOutlet, NgClass],
-  host: {
-    class: 'et-scrollable-placeholder',
-  },
-})
-export class ScrollablePlaceholderComponent {
-  renderMasks = input(true, { transform: booleanAttribute });
-  renderStartMask = input(false, { transform: booleanAttribute });
-  renderEndMask = input(true, { transform: booleanAttribute });
-  repeatContentCount = input(1, { transform: numberAttribute });
-  scrollableClass = input<NgClassType>();
-
-  repeat = computed(() => Array.from({ length: this.repeatContentCount() }));
-
-  contentTemplate = contentChild.required(SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, { read: TemplateRef });
-  overlayTemplate = contentChild(SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, { read: TemplateRef });
-}

package/src/lib/components/scrollable/directives/scrollable-ignore-child/scrollable-ignore-child.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, InjectionToken, Input, booleanAttribute, signal } from '@angular/core';
-import { signalHostAttributes } from '@ethlete/core';
-
-export const SCROLLABLE_IGNORE_CHILD_TOKEN = new InjectionToken<ScrollableIgnoreChildDirective>(
-  'SCROLLABLE_IGNORE_CHILD_TOKEN',
-);
-
-export const SCROLLABLE_IGNORE_CHILD_ATTRIBUTE = 'etScrollableIgnoreChild';
-
-export const isScrollableChildIgnored = (e: HTMLElement) => {
-  const attr = e.attributes.getNamedItem(SCROLLABLE_IGNORE_CHILD_ATTRIBUTE)?.value;
-
-  return attr === 'true' || attr === '';
-};
-
-@Directive({
-  selector: `[${SCROLLABLE_IGNORE_CHILD_ATTRIBUTE}]`,
-  standalone: true,
-  providers: [
-    {
-      provide: SCROLLABLE_IGNORE_CHILD_TOKEN,
-      useExisting: ScrollableIgnoreChildDirective,
-    },
-  ],
-})
-export class ScrollableIgnoreChildDirective {
-  @Input({ transform: booleanAttribute, alias: SCROLLABLE_IGNORE_CHILD_ATTRIBUTE })
-  set _ignoreChildEnabled(v: boolean) {
-    this.ignoreChildEnabled.set(v);
-  }
-  readonly ignoreChildEnabled = signal(true);
-
-  readonly hostAttributeBindings = signalHostAttributes({
-    [SCROLLABLE_IGNORE_CHILD_ATTRIBUTE]: this.ignoreChildEnabled,
-  });
-}

package/src/lib/components/scrollable/directives/scrollable-is-active-child/scrollable-is-active-child.directive.ts

@@ -1,38 +0,0 @@
-import { Directive, ElementRef, InjectionToken, Input, booleanAttribute, inject, signal } from '@angular/core';
-import { signalHostAttributes } from '@ethlete/core';
-
-export const SCROLLABLE_IS_ACTIVE_CHILD_TOKEN = new InjectionToken<ScrollableIsActiveChildDirective>(
-  'SCROLLABLE_IS_ACTIVE_CHILD_TOKEN',
-);
-
-export const SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE = 'etScrollableIsActiveChild';
-
-export const isScrollableChildActive = (e: HTMLElement) => {
-  const attr = e.attributes.getNamedItem(SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE)?.value;
-
-  return attr === 'true' || attr === '';
-};
-
-@Directive({
-  selector: `[${SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE}]`,
-  standalone: true,
-  providers: [
-    {
-      provide: SCROLLABLE_IS_ACTIVE_CHILD_TOKEN,
-      useExisting: ScrollableIsActiveChildDirective,
-    },
-  ],
-})
-export class ScrollableIsActiveChildDirective {
-  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  @Input({ transform: booleanAttribute, alias: SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE })
-  set _isActiveChildEnabled(v: boolean) {
-    this.isActiveChildEnabled.set(v);
-  }
-  readonly isActiveChildEnabled = signal(true);
-
-  readonly hostAttributeBindings = signalHostAttributes({
-    [SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE]: this.isActiveChildEnabled,
-  });
-}

package/src/lib/components/scrollable/directives/scrollable-loading-template/scrollable-loading-template.directive.ts

@@ -1,23 +0,0 @@
-import { Directive, InjectionToken, TemplateRef, computed, inject, input, numberAttribute } from '@angular/core';
-
-export const SCROLLABLE_LOADING_TEMPLATE_TOKEN = new InjectionToken<ScrollableLoadingTemplateDirective>(
-  'SCROLLABLE_LOADING_TEMPLATE_TOKEN',
-);
-
-@Directive({
-  selector: 'ng-template[etScrollableLoadingTemplate]',
-  standalone: true,
-  providers: [
-    {
-      provide: SCROLLABLE_LOADING_TEMPLATE_TOKEN,
-      useExisting: ScrollableLoadingTemplateDirective,
-    },
-  ],
-})
-export class ScrollableLoadingTemplateDirective {
-  templateRef = inject(TemplateRef);
-
-  repeatContentCount = input(1, { transform: numberAttribute });
-
-  repeat = computed(() => Array.from({ length: this.repeatContentCount() }));
-}

package/src/lib/components/scrollable/directives/scrollable-placeholder-item-template/scrollable-placeholder-item-template.directive.ts

@@ -1,16 +0,0 @@
-import { Directive, InjectionToken } from '@angular/core';
-
-export const SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN =
-  new InjectionToken<ScrollablePlaceholderItemTemplateDirective>('SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN');
-
-@Directive({
-  selector: 'ng-template[etScrollablePlaceholderItemTemplate]',
-  standalone: true,
-  providers: [
-    {
-      provide: SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN,
-      useExisting: ScrollablePlaceholderItemTemplateDirective,
-    },
-  ],
-})
-export class ScrollablePlaceholderItemTemplateDirective {}

package/src/lib/components/scrollable/directives/scrollable-placeholder-overlay-template/scrollable-placeholder-overlay-template.directive.ts

@@ -1,16 +0,0 @@
-import { Directive, InjectionToken } from '@angular/core';
-
-export const SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN =
-  new InjectionToken<ScrollablePlaceholderOverlayTemplateDirective>('SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN');
-
-@Directive({
-  selector: 'ng-template[etScrollablePlaceholderOverlayTemplate]',
-  standalone: true,
-  providers: [
-    {
-      provide: SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN,
-      useExisting: ScrollablePlaceholderOverlayTemplateDirective,
-    },
-  ],
-})
-export class ScrollablePlaceholderOverlayTemplateDirective {}

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

@@ -1,17 +0,0 @@
-import { ScrollableComponent } from './components/scrollable';
-import { ScrollablePlaceholderComponent } from './components/scrollable-placeholder';
-import { ScrollableIgnoreChildDirective } from './directives/scrollable-ignore-child';
-import { ScrollableIsActiveChildDirective } from './directives/scrollable-is-active-child';
-import { ScrollableLoadingTemplateDirective } from './directives/scrollable-loading-template';
-import { ScrollablePlaceholderItemTemplateDirective } from './directives/scrollable-placeholder-item-template';
-import { ScrollablePlaceholderOverlayTemplateDirective } from './directives/scrollable-placeholder-overlay-template';
-
-export const ScrollableImports = [
-  ScrollableComponent,
-  ScrollableIsActiveChildDirective,
-  ScrollableIgnoreChildDirective,
-  ScrollableLoadingTemplateDirective,
-  ScrollablePlaceholderItemTemplateDirective,
-  ScrollablePlaceholderOverlayTemplateDirective,
-  ScrollablePlaceholderComponent,
-] as const;

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

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

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

@@ -1,185 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgClassType } from '@ethlete/core';
-import { ScrollableButtonPosition, ScrollableComponent, ScrollableScrollOrigin } from '../../components/scrollable';
-import { ScrollableImports } from '../../scrollable.imports';
-import { ScrollableScrollMode } from '../../types';
-
-@Component({
-  selector: 'et-sb-scrollable',
-  template: `
-    <button (click)="makeScrollable = !makeScrollable" type="button">Toggle scrollable</button>
-    <button (click)="scrollToIndex(4)" type="button">Scroll to index 4</button>
-
-    <et-scrollable
-      [stickyButtons]="stickyButtons"
-      [itemSize]="itemSize"
-      [direction]="direction"
-      [scrollableRole]="scrollableRole ?? null"
-      [scrollableClass]="scrollableClass"
-      [renderMasks]="renderMasks"
-      [renderButtons]="renderButtons"
-      [renderScrollbars]="renderScrollbars"
-      [cursorDragScroll]="cursorDragScroll"
-      [disableActiveElementScrolling]="disableActiveElementScrolling"
-      [renderNavigation]="renderNavigation"
-      [buttonPosition]="buttonPosition"
-      [scrollMode]="scrollMode"
-      [snap]="snap"
-      [scrollMargin]="scrollMargin"
-      [scrollOrigin]="scrollOrigin"
-    >
-      <button (click)="doClick(0)" class="scrollable-item">0</button>
-      <button (click)="doClick(1)" class="scrollable-item">1</button>
-      @if (makeScrollable) {
-        <button (click)="doClick(2)" class="scrollable-item">2</button>
-      }
-      @if (makeScrollable) {
-        <button (click)="doClick(3)" class="scrollable-item" etScrollableIsActiveChild="false">3</button>
-      }
-      @if (makeScrollable) {
-        <button (click)="doClick(4)" class="scrollable-item" etScrollableIsActiveChild>4</button>
-      }
-      @if (makeScrollable) {
-        <button (click)="doClick(5)" class="scrollable-item">5</button>
-      }
-      @if (makeScrollable) {
-        <button (click)="doClick(6)" class="scrollable-item">6</button>
-      }
-    </et-scrollable>
-  `,
-  styles: [
-    `
-      .et-scrollable {
-        margin-top: 20px;
-
-        &[direction='vertical'] {
-          width: min(80vw, 400px);
-
-          .et-scrollable-container {
-            height: 250px;
-          }
-        }
-
-        &[direction='vertical'][sticky-buttons='true'] {
-          width: 200vw;
-        }
-
-        &[direction='horizontal'][sticky-buttons='true'] .et-scrollable-container {
-          height: 500px;
-        }
-      }
-
-      .et-scrollable-container {
-        height: 100px;
-        gap: 20px;
-      }
-
-      .scrollable-item {
-        width: min(80vw, 400px);
-        background-color: #ccc;
-        height: 100px;
-        outline: 1px solid red;
-        outline-offset: -1px;
-      }
-
-      p {
-        white-space: nowrap;
-      }
-
-      .scrollable-item:nth-child(2) {
-        background-color: #aaa;
-      }
-
-      .scrollable-item:nth-child(3) {
-        background-color: #888;
-      }
-
-      .scrollable-item:nth-child(4) {
-        background-color: #666;
-      }
-
-      .scrollable-item:nth-child(5) {
-        background-color: #444;
-      }
-
-      .scrollable-item:nth-child(6) {
-        background-color: #222;
-      }
-
-      .scrollable-item:nth-child(7) {
-        background-color: #000;
-      }
-    `,
-  ],
-  standalone: true,
-  imports: [AsyncPipe, ScrollableImports],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScrollableStorybookComponent {
-  makeScrollable = true;
-
-  @ViewChild(ScrollableComponent, { static: true })
-  scrollable!: ScrollableComponent;
-
-  @Input()
-  itemSize: 'auto' | 'same' | 'full' = 'auto';
-
-  @Input()
-  direction: 'horizontal' | 'vertical' = 'horizontal';
-
-  @Input()
-  scrollableRole?: string;
-
-  @Input()
-  scrollableClass?: NgClassType;
-
-  @Input()
-  renderMasks = true;
-
-  @Input()
-  scrollMode: ScrollableScrollMode = 'container';
-
-  @Input()
-  renderButtons = true;
-
-  @Input()
-  renderScrollbars = false;
-
-  @Input()
-  stickyButtons = false;
-
-  @Input()
-  cursorDragScroll = false;
-
-  @Input()
-  snap = false;
-
-  @Input()
-  renderNavigation = false;
-
-  @Input()
-  buttonPosition: ScrollableButtonPosition = 'inside';
-
-  @Input()
-  scrollOrigin: ScrollableScrollOrigin = 'auto';
-
-  @Input()
-  disableActiveElementScrolling = false;
-
-  @Input()
-  scrollMargin = 0;
-
-  scrollToIndex(index: number) {
-    this.scrollable.scrollToElementByIndex({ index });
-  }
-
-  doClick(item: number) {
-    alert(item);
-  }
-
-  logState(state: unknown) {
-    console.log(state);
-  }
-}

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

@@ -1,190 +0,0 @@
-# Scrollable
-
-The scrollable component is a wrapper for a content that might be too long to fit on the screen.
-It can display buttons to scroll to the top or bottom (or left & right) of the content. It can also display masks to fade out the overflowing content.
-If enabled, the scrollable can be scrolled using mouse drag.
-
-### Basic usage
-
-```html
-<et-scrollable>
-  <div class="my-scrollable-item"></div>
-  <div class="my-scrollable-item"></div>
-  <div class="my-scrollable-item"></div>
-</et-scrollable>
-```
-
-### Inputs
-
----
-
-#### stickyButtons
-
-Control if the et-scrollable-buttons should be sticky \
-**_note:_** \
-This is not compatible with 'buttonPosition: 'footer'' \
-default: 'false'
-
----
-
-#### itemSize
-
-Control **_grid-auto-columns_** on the et-scrollable-container\
-'auto' : min-content \
-'same': 1fr\
-'full': 100% \
-default: 'auto'
-
----
-
-#### direction
-
-Control the scrollable scrolldirection \
-'horizontal' \
-'vertical' \
-default: 'horizontal'
-
----
-
-#### scrollableRole
-
-Control the [attr.role] on the #scrollable for accessability purposes \
-default: 'null'
-
----
-
-#### scrollableClass
-
-Apply styling to the et-scrollable-container\
-default: 'null'
-
----
-
-#### renderMasks
-
-Control whether to render the et-scrollable-masks \
-This refers to the _fade_ for the items that are on the far left and the far right of the scrollable \
-default: 'true'
-
----
-
-#### renderButtons
-
-Control whether the et-scrollable-buttons should be rendered or not \
-default: 'true'
-
----
-
-#### renderScrollbars
-
-Control whether to render scrollbars \
-default: 'false'
-
----
-
-#### cursorDragScroll
-
-Control whether the user should be able to 'drag' an item to scroll \
-default: 'true'
-
----
-
-#### disableActiveElementScrolling
-
-Control whether the scrollable should scroll to the active item \
-default: 'false'
-
----
-
-#### renderNavigation
-
-The Navigation displays a 'bubble' for each scrollable item beneath the scrollable \
-This can be used for mobile navigation for example \
-default: 'false'
-
----
-
-#### buttonPosition
-
-Control whether the et-scrollable-buttons should be rendered in the scrollable or the footer \
-'inside'\
-'footer' \
-default: 'inside'
-
----
-
-#### scrollMode
-
-Control whether to scroll one Container size or one Item size when the scrolling happens through a button or the navigation \
-**_note:_** \
- If snapping is enabled we want to scroll to a position where no further snapping will happen after the scroll. \
- If snapping is disabled, just scroll one size of the scrollable container or item.
-
-'container'\
-'element' \
-default: 'container'
-
----
-
-#### snap
-
-Control snapping on the scrollable \
-**_note:_** \
-this can be used in combination with the scrollOrigin input to snap to the 'center', 'start' or 'end' of an item \
-default: 'false'
-
----
-
-#### scrollMargin
-
-Control the scrollInlineMargin or the scrollBlockMargin depending on the scrollDirection \
-default: '0'
-
----
-
-### scrollOrigin
-
-Control the scrollOrigin of the scrollable \
-'auto' \
-'center' \
-'start' \
-'end' \
-default: 'auto'
-
----
-
-#### darkenNonIntersectingItems
-
-This applies an oppacity to items that are not fully visible
-
-**_note:_** \
-the css variable '--darken-non-intersecting-items-amount' controls the opacity that is applied to said items \
-default: 'false'
-
----
-
-#### showLoadingTemplate
-
-**_example usage_**
-
-```
-   <et-scrollable
-  [showLoadingTemplate]="loading">
-
-  <ng-template etScrollableLoadingTemplate repeatContentCount="2">
-  <et-skeleton-item />
-  </ng-template>
-
-  </et-scrollable>
-```
-
-default: 'false'
-
----
-
-#### loadingTemplatePosition
-
-Set the position of the loading template \
-'start' \
-'end' \
-default: 'end'