@ethlete/cdk 4.27.3 → 4.28.0

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

@@ -0,0 +1,134 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { ScrollableStorybookComponent } from './components';
+import CustomMDXDocumentation from './scrollable.docs.mdx';
+
+export default {
+  title: 'CDK/Scrollable',
+  component: ScrollableStorybookComponent,
+  argTypes: {
+    stickyButtons: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['horizontal', 'vertical'],
+    },
+    itemSize: {
+      control: {
+        type: 'select',
+      },
+      options: ['auto', 'same', 'full'],
+    },
+    scrollableRole: {
+      control: {
+        type: 'text',
+      },
+    },
+    scrollMode: {
+      control: {
+        type: 'select',
+      },
+      options: ['container', 'element'],
+    },
+    scrollableClass: {
+      control: {
+        type: 'text',
+      },
+    },
+    renderMasks: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    renderNavigation: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    buttonPosition: {
+      control: {
+        type: 'select',
+      },
+      options: ['inside', 'footer'],
+    },
+    scrollOrigin: {
+      control: {
+        type: 'select',
+      },
+      options: ['auto', 'center', 'start', 'end'],
+    },
+    renderScrollbars: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    renderButtons: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    makeScrollable: {
+      control: {
+        type: 'boolean',
+      },
+      name: 'Make scrollable (Story only)',
+    },
+    cursorDragScroll: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    snap: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    scrollMargin: {
+      control: {
+        type: 'number',
+      },
+    },
+    disableActiveElementScrolling: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    stickyButtons: false,
+    direction: 'horizontal',
+    itemSize: 'auto',
+    scrollableRole: undefined,
+    makeScrollable: true,
+    scrollableClass: undefined,
+    scrollOrigin: 'auto',
+    renderMasks: true,
+    renderScrollbars: false,
+    renderButtons: true,
+    cursorDragScroll: true,
+    disableActiveElementScrolling: false,
+    scrollMode: 'container',
+    snap: false,
+    scrollMargin: 0,
+    renderNavigation: false,
+    buttonPosition: 'inside',
+  },
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+} as Meta<ScrollableStorybookComponent>;
+
+const Template: StoryFn<ScrollableStorybookComponent> = (args) => ({
+  props: args,
+});
+
+export const Default = {
+  render: Template,
+  args: {},
+};

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

@@ -0,0 +1,8 @@
+export type ScrollableScrollMode = 'container' | 'element';
+
+export interface ScrollableIntersectionChange {
+  element: HTMLElement;
+  intersectionRatio: number;
+  isIntersecting: boolean;
+  index: number;
+}

package/src/lib/components/skeleton/components/skeleton/skeleton.component.scss

@@ -0,0 +1,13 @@
+:where(.et-skeleton) {
+  --et-skeleton-gradient: linear-gradient(
+    90deg,
+    rgba(190, 190, 190, 0) 15%,
+    rgba(129, 129, 129, 0.5) 37%,
+    rgba(190, 190, 190, 0) 63%
+  );
+  --et-skeleton-animation-duration: 3s;
+  --et-skeleton-animation-timing-function: var(--ease-3);
+
+  display: block;
+  cursor: progress;
+}

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

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+  booleanAttribute,
+} from '@angular/core';
+
+@Component({
+  selector: 'et-skeleton',
+  template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`,
+  styleUrls: ['skeleton.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-skeleton',
+  },
+})
+export class SkeletonComponent {
+  @Input()
+  loadingAllyText = 'Loading...';
+
+  @Input({ transform: booleanAttribute })
+  @HostBinding('class.et-skeleton--animated')
+  animated = true;
+}

package/src/lib/components/skeleton/partials/skeleton-item/skeleton-item.component.scss

@@ -0,0 +1,31 @@
+.et-skeleton-item {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+.et-skeleton--animated .et-skeleton-item::before {
+  content: '';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(-100%);
+  z-index: 1;
+  background: var(--et-skeleton-gradient);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: skeleton-loading var(--et-skeleton-animation-duration) infinite
+      var(--et-skeleton-animation-timing-function);
+  }
+}
+
+@keyframes skeleton-loading {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

package/src/lib/components/skeleton/partials/skeleton-item/skeleton-item.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'et-skeleton-item',
+  template: ``,
+  styleUrls: ['skeleton-item.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-skeleton-item',
+  },
+})
+export class SkeletonItemComponent {
+  @HostBinding('attr.aria-hidden')
+  ariaHidden = true;
+}

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

@@ -0,0 +1,4 @@
+import { SkeletonComponent } from './components/skeleton';
+import { SkeletonItemComponent } from './partials/skeleton-item';
+
+export const SkeletonImports = [SkeletonComponent, SkeletonItemComponent] as const;

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

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

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

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { SkeletonComponent } from '../../components/skeleton';
+import { SkeletonItemComponent } from '../../partials/skeleton-item';
+
+@Component({
+  selector: 'et-sb-skeleton',
+  template: `
+    <et-skeleton [loadingAllyText]="loadingAllyText" [animated]="animated">
+      <et-skeleton-item />
+      <et-skeleton-item />
+      <et-skeleton-item />
+    </et-skeleton>
+  `,
+  styles: [
+    `
+      et-skeleton {
+        background-color: #343434;
+        width: 315px;
+        padding: 16px;
+        border-radius: 8px;
+      }
+
+      et-skeleton-item {
+        background-color: #555555;
+      }
+
+      et-skeleton-item:nth-of-type(1) {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        margin-bottom: 60px;
+      }
+
+      et-skeleton-item:nth-of-type(2) {
+        width: 60%;
+        height: 24px;
+        margin-bottom: 16px;
+        border-radius: 4px;
+      }
+
+      et-skeleton-item:nth-of-type(3) {
+        width: 100%;
+        height: 24px;
+        border-radius: 4px;
+      }
+    `,
+  ],
+  standalone: true,
+  imports: [SkeletonComponent, SkeletonItemComponent],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonStorybookComponent {
+  @Input()
+  loadingAllyText = 'Loading...';
+
+  @Input()
+  animated = true;
+}

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

@@ -0,0 +1,98 @@
+# Skeleton
+
+Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
+
+## Code examples
+
+Below you can find example code and usefull documentation for creating loading skeletons.
+
+### Basic usage
+
+```html
+<et-skeleton loadingAllyText="Loading example thing...">
+  <et-skeleton-item></et-skeleton-item>
+  <et-skeleton-item></et-skeleton-item>
+  <et-skeleton-item></et-skeleton-item>
+</et-skeleton>
+```
+
+```scss
+et-skeleton {
+  background-color: #343434;
+  width: 315px;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+et-skeleton-item {
+  background-color: #555555;
+
+  &:nth-of-type(1) {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-bottom: 60px;
+  }
+
+  &:nth-of-type(2) {
+    width: 60%;
+    height: 24px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+  }
+
+  &:nth-of-type(3) {
+    width: 100%;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+```
+
+### Disable animations
+
+The animations will always be disabled, if the user prefers [reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+It can also get explicitly disabled by setting the `animated` property to `false`.
+
+```html
+<et-skeleton loadingAllyText="Loading example thing..." animated="false">
+  <et-skeleton-item></et-skeleton-item>
+  <et-skeleton-item></et-skeleton-item>
+  <et-skeleton-item></et-skeleton-item>
+</et-skeleton>
+```
+
+## Styling
+
+The skeleton component provides css classes & variables for styling.
+
+#### `et-skeleton`
+
+> The skeleton container.
+
+<table>
+  <tr>
+    <td>Variable</td>
+    <td>Description</td>
+  </tr>
+  <tr>
+    <td>`--et-skeleton-gradient`</td>
+    <td>The animated gradient that moves over the skeleton</td>
+  </tr>
+  <tr>
+    <td>`--et-skeleton-animation-duration`</td>
+    <td>The animation duration</td>
+  </tr>
+  <tr>
+    <td>`--et-skeleton-animation-timing-function`</td>
+    <td>The animation timing function</td>
+  </tr>
+</table>
+
+#### `et-skeleton--animated`
+
+> Applied to the skeleton container when the `animated` property is set to `true`.
+
+#### `et-skeleton-item`
+
+> The skeleton item.

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

@@ -0,0 +1,38 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { SkeletonStorybookComponent } from './components';
+import CustomMDXDocumentation from './skeleton.docs.mdx';
+
+export default {
+  title: 'CDK/Skeleton',
+  component: SkeletonStorybookComponent,
+  argTypes: {
+    loadingAllyText: {
+      control: {
+        type: 'text',
+      },
+    },
+    animated: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    loadingAllyText: 'Loading...',
+    animated: true,
+  },
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+} as Meta<SkeletonStorybookComponent>;
+
+const Template: StoryFn<SkeletonStorybookComponent> = (args) => ({
+  props: args,
+});
+
+export const Default = {
+  render: Template,
+  args: {},
+};

package/src/lib/components/sort/components/sort-header/sort-header.component.html

@@ -0,0 +1,17 @@
+<div
+  [class.et-sort-header-sorted]="_isSorted"
+  [class.et-sort-header-position-before]="arrowPosition === 'before'"
+  [attr.tabindex]="_isDisabled ? null : 0"
+  [attr.role]="_isDisabled ? null : 'button'"
+  class="et-sort-header-container"
+>
+  <div class="et-sort-header-content">
+    <ng-content />
+  </div>
+
+  @if (_renderArrow) {
+    <div class="et-sort-header-arrow {{ _getArrowDirectionState }} {{ _getArrowViewState }}">
+      <et-chevron-icon />
+    </div>
+  }
+</div>

package/src/lib/components/sort/components/sort-header/sort-header.component.scss

@@ -0,0 +1,71 @@
+:where(.et-sort-header) {
+  --et-sort-header-arrow-size: 10px;
+  --et-sort-header-gap: 8px;
+}
+
+.et-sort-header {
+  cursor: pointer;
+
+  &.et-sort-header-disabled {
+    cursor: default;
+  }
+}
+
+.et-sort-header-container {
+  display: flex;
+  align-items: center;
+  letter-spacing: normal;
+  outline: 0;
+  gap: var(--et-sort-header-gap);
+}
+
+.et-sort-header-content {
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
+.et-sort-header-position-before {
+  flex-direction: row-reverse;
+}
+
+.et-sort-header {
+  &:hover,
+  &.cdk-keyboard-focused {
+    .et-sort-header-arrow {
+      opacity: 0.5;
+    }
+  }
+
+  .et-sort-header-arrow {
+    transition: opacity 200ms var(--ease-out-5);
+
+    .et-chevron-icon svg {
+      transition: transform 200ms var(--ease-out-5);
+    }
+  }
+
+  .et-sort-header-arrow {
+    inline-size: var(--et-sort-header-arrow-size);
+    opacity: 0;
+
+    &.active-desc,
+    &.active-asc {
+      opacity: 1;
+    }
+
+    &.desc,
+    &.asc,
+    &.active-desc {
+      .et-chevron-icon svg {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.active-asc {
+      .et-chevron-icon svg {
+        transform: rotate(0deg);
+      }
+    }
+  }
+}