@ethlete/cdk 4.28.0 → 4.28.1

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

@@ -1,134 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,13 +0,0 @@
-: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

@@ -1,28 +0,0 @@
-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

@@ -1,31 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,59 +0,0 @@
-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

@@ -1,98 +0,0 @@
-# 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

@@ -1,38 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-: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);
-      }
-    }
-  }
-}