@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/accordion/components/accordion/accordion.component.stories.ts

@@ -1,102 +0,0 @@
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular';
-import { AccordionHintDirective } from '../../partials/accordion-hint';
-import { AccordionHintWrapperDirective } from '../../partials/accordion-hint-wrapper';
-import { AccordionLabelDirective } from '../../partials/accordion-label';
-import { AccordionLabelWrapperDirective } from '../../partials/accordion-label-wrapper';
-import { AccordionComponent } from './accordion.component';
-import CustomMDXDocumentation from './accordion.component.docs.mdx';
-
-export default {
-  title: 'CDK/Accordion',
-  component: AccordionComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        AccordionLabelDirective,
-        AccordionLabelWrapperDirective,
-        AccordionHintDirective,
-        AccordionHintWrapperDirective,
-      ],
-    }),
-    applicationConfig({
-      providers: [provideAnimations()],
-    }),
-  ],
-  argTypes: {
-    isOpenByDefault: {
-      control: { type: 'boolean' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-  },
-  args: {
-    isOpenByDefault: false,
-    disabled: false,
-    label: 'Some accordion',
-  },
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-} as Meta<AccordionComponent>;
-
-const Template: StoryFn<AccordionComponent> = (args) => ({
-  props: args,
-  template: `
-    <et-accordion [isOpenByDefault]="isOpenByDefault" [disabled]="disabled" [label]="label">
-      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas odit ullam tempora dolores? Quo facilis vero voluptatum pariatur iste! Dolorem. </p>
-      <img src="https://placekitten.com/200/200" alt="Kitten" class="w-10 h-10 rounded-10 mt-3">
-    </et-accordion>
-    `,
-});
-
-export const Default = {
-  render: Template,
-  args: {},
-};
-
-const TemplateCustomLabel: StoryFn<AccordionComponent> = (args) => ({
-  props: args,
-  template: `
-    <et-accordion [isOpenByDefault]="isOpenByDefault" [disabled]="disabled">
-      <ng-template et-accordion-label-wrapper>
-        <span et-accordion-label>Custom label</span>
-      </ng-template>
-
-      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas odit ullam tempora dolores? Quo facilis vero voluptatum pariatur iste! Dolorem. </p>
-      <img src="https://placekitten.com/200/200" alt="Kitten" class="w-10 h-10 rounded-10 mt-3">
-    </et-accordion>
-    `,
-});
-
-export const WithCustomLabel = {
-  render: TemplateCustomLabel,
-  args: {},
-};
-
-const TemplateWithHint: StoryFn<AccordionComponent> = (args) => ({
-  props: args,
-  template: `
-    <et-accordion [isOpenByDefault]="isOpenByDefault" [disabled]="disabled" [label]="label">
-      <ng-template et-accordion-hint-wrapper>
-        <span et-accordion-hint>
-          Some hint
-        </span> 
-      </ng-template>
-      
-      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas odit ullam tempora dolores? Quo facilis vero voluptatum pariatur iste! Dolorem. </p>
-      <img src="https://placekitten.com/200/200" alt="Kitten" class="w-10 h-10 rounded-10 mt-3">
-    </et-accordion>
-    `,
-});
-
-export const WithHint = {
-  render: TemplateWithHint,
-  args: {},
-};

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

@@ -1,97 +0,0 @@
-import { PortalModule } from '@angular/cdk/portal';
-import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  Input,
-  OnInit,
-  ViewEncapsulation,
-  booleanAttribute,
-} from '@angular/core';
-import { LetDirective } from '@ethlete/core';
-import { BehaviorSubject } from 'rxjs';
-import { ChevronIconComponent } from '../../../icons/chevron-icon';
-import { ACCORDION_HINT_WRAPPER_DIRECTIVE, AccordionHintWrapperDirective } from '../../partials/accordion-hint-wrapper';
-import { AccordionLabelDirective } from '../../partials/accordion-label';
-import {
-  ACCORDION_LABEL_WRAPPER_DIRECTIVE,
-  AccordionLabelWrapperDirective,
-} from '../../partials/accordion-label-wrapper';
-import { accordionAnimations } from './accordion.component.animations';
-import { ACCORDION_COMPONENT } from './accordion.component.constants';
-
-let accordionId = 0;
-
-@Component({
-  selector: 'et-accordion',
-  templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  providers: [{ provide: ACCORDION_COMPONENT, useExisting: AccordionComponent }],
-  imports: [
-    LetDirective,
-    AsyncPipe,
-    NgClass,
-    AccordionLabelDirective,
-    PortalModule,
-    NgTemplateOutlet,
-    ChevronIconComponent,
-  ],
-  animations: [accordionAnimations.animateOpenClose],
-  host: {
-    class: 'et-accordion',
-  },
-})
-export class AccordionComponent implements OnInit {
-  private readonly _id = `et-accordion-${accordionId++}`;
-
-  @Input({ transform: booleanAttribute })
-  isOpenByDefault = false;
-
-  @Input({ transform: booleanAttribute })
-  disabled = false;
-
-  @Input()
-  label = '';
-
-  @ContentChild(ACCORDION_LABEL_WRAPPER_DIRECTIVE)
-  protected readonly templateLabel!: AccordionLabelWrapperDirective;
-
-  @ContentChild(ACCORDION_HINT_WRAPPER_DIRECTIVE)
-  protected readonly templateHint!: AccordionHintWrapperDirective;
-
-  protected readonly bodyId = `${this._id}-body`;
-  protected readonly headerId = `${this._id}-header`;
-
-  _isFirst = false;
-  _isLast = false;
-
-  protected readonly _isOpen$ = new BehaviorSubject(false);
-
-  get isOpen$() {
-    return this._isOpen$.asObservable();
-  }
-
-  get isOpen() {
-    return this._isOpen$.value;
-  }
-
-  ngOnInit(): void {
-    this._isOpen$.next(this.isOpenByDefault);
-  }
-
-  toggleAccordionOpen() {
-    this._isOpen$.next(!this._isOpen$.value);
-  }
-
-  open() {
-    this._isOpen$.next(true);
-  }
-
-  close() {
-    this._isOpen$.next(false);
-  }
-}

package/src/lib/components/accordion/components/accordion-group/accordion-group.component.docs.mdx

@@ -1,23 +0,0 @@
-# Accordion group
-
-The accordion group is a container for a group of accordion components.
-
-### Basic usage
-
-```html
-<et-accordion-group>
-  <et-accordion label="Some accordion">
-    <p>My content</p>
-  </et-accordion>
-  <et-accordion label="Some accordion">
-    <p>My content</p>
-  </et-accordion>
-  <et-accordion label="Some accordion">
-    <p>My content</p>
-  </et-accordion>
-</et-accordion-group>
-```
-
-#### Related docs:
-
-- [Accordion](/story/cdk-accordion--default)

package/src/lib/components/accordion/components/accordion-group/accordion-group.component.html

@@ -1 +0,0 @@
-<ng-content select="et-accordion" />

package/src/lib/components/accordion/components/accordion-group/accordion-group.component.ts

@@ -1,74 +0,0 @@
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  Input,
-  ViewEncapsulation,
-  booleanAttribute,
-} from '@angular/core';
-import { TypedQueryList, createDestroy } from '@ethlete/core';
-import { combineLatest, map, pairwise, startWith, switchMap, takeUntil, tap } from 'rxjs';
-import { ACCORDION_COMPONENT, AccordionComponent } from '../accordion';
-
-@Component({
-  selector: 'et-accordion-group',
-  templateUrl: './accordion-group.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    class: 'et-accordion-group',
-  },
-})
-export class AccordionGroupComponent implements AfterContentInit {
-  private readonly _destroy$ = createDestroy();
-
-  @Input({ transform: booleanAttribute })
-  autoCloseOthers = false;
-
-  @ContentChildren(ACCORDION_COMPONENT)
-  private readonly _accordions?: TypedQueryList<AccordionComponent>;
-
-  ngAfterContentInit(): void {
-    if (!this._accordions) {
-      return;
-    }
-
-    this._accordions.changes
-      .pipe(
-        startWith(this._accordions),
-        map(
-          (accordions) =>
-            accordions
-              ?.toArray()
-              .filter((a): a is AccordionComponent => !!a)
-              .map((a) => a.isOpen$) ?? [],
-        ),
-        switchMap((d) => combineLatest(d)),
-        pairwise(),
-        tap(([prev, curr]) => {
-          if (!this.autoCloseOthers) {
-            return;
-          }
-
-          const isOpenedNow = curr.findIndex((a, i) => a && !prev[i]);
-
-          if (isOpenedNow === -1) {
-            return;
-          }
-
-          for (const [i, item] of this._accordions
-            ?.toArray()
-            .filter((a): a is AccordionComponent => !!a)
-            .entries() ?? [].entries()) {
-            if (i !== isOpenedNow && item.isOpen) {
-              item.close();
-            }
-          }
-        }),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-  }
-}

package/src/lib/components/accordion/components/accordion-group/accordion.component.stories.ts

@@ -1,57 +0,0 @@
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular';
-import { AccordionComponent } from '../accordion/accordion.component';
-import { AccordionGroupComponent } from './accordion-group.component';
-import CustomMDXDocumentation from './accordion-group.component.docs.mdx';
-
-export default {
-  title: 'CDK/Accordion/Group',
-  component: AccordionGroupComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [AccordionComponent],
-    }),
-    applicationConfig({
-      providers: [provideAnimations()],
-    }),
-  ],
-  argTypes: {
-    autoCloseOthers: {
-      control: { type: 'boolean' },
-      description: 'Auto close the previously opened accordion',
-    },
-  },
-  args: {
-    autoCloseOthers: false,
-  },
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-} as Meta<AccordionGroupComponent>;
-
-const Template: StoryFn<AccordionGroupComponent> = (args) => ({
-  props: args,
-  template: `
-    <et-accordion-group [autoCloseOthers]="autoCloseOthers">
-      <et-accordion label="One">
-        <p> Lorem ipsum dolor sit. </p>
-        <img src="https://placekitten.com/200/200" alt="Kitten">
-      </et-accordion>
-      <et-accordion label="Two">
-        <p> Lorem ipsum dolor sit. </p>
-        <img src="https://placekitten.com/200/200" alt="Kitten" >
-      </et-accordion>
-      <et-accordion label="Three">
-        <p> Lorem ipsum dolor sit. </p>
-        <img src="https://placekitten.com/200/200" alt="Kitten">
-      </et-accordion>
-    </et-accordion-group>
-    `,
-});
-
-export const Default = {
-  render: Template,
-  args: {},
-};

package/src/lib/components/accordion/partials/accordion-hint/accordion-hint.directive.ts

@@ -1,10 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: '[et-accordion-hint]',
-  standalone: true,
-  host: {
-    class: 'et-accordion-hint',
-  },
-})
-export class AccordionHintDirective {}

package/src/lib/components/accordion/partials/accordion-hint-wrapper/accordion-hint-wrapper.directive.constants.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { AccordionHintWrapperDirective } from './accordion-hint-wrapper.directive';
-
-export const ACCORDION_HINT_WRAPPER_DIRECTIVE = new InjectionToken<AccordionHintWrapperDirective>(
-  'AccordionHintWrapperDirective',
-);

package/src/lib/components/accordion/partials/accordion-hint-wrapper/accordion-hint-wrapper.directive.ts

@@ -1,14 +0,0 @@
-import { CdkPortal } from '@angular/cdk/portal';
-import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ACCORDION_HINT_WRAPPER_DIRECTIVE } from './accordion-hint-wrapper.directive.constants';
-
-@Directive({
-  selector: 'ng-template[et-accordion-hint-wrapper]',
-  providers: [{ provide: ACCORDION_HINT_WRAPPER_DIRECTIVE, useExisting: AccordionHintWrapperDirective }],
-  standalone: true,
-})
-export class AccordionHintWrapperDirective extends CdkPortal {
-  constructor(templateRef: TemplateRef<unknown>, viewContainerRef: ViewContainerRef) {
-    super(templateRef, viewContainerRef);
-  }
-}

package/src/lib/components/accordion/partials/accordion-label/accordion-label.directive.ts

@@ -1,10 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: '[et-accordion-label]',
-  standalone: true,
-  host: {
-    class: 'et-accordion-label',
-  },
-})
-export class AccordionLabelDirective {}

package/src/lib/components/accordion/partials/accordion-label-wrapper/accordion-label-wrapper.directive.constants.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { AccordionLabelWrapperDirective } from './accordion-label-wrapper.directive';
-
-export const ACCORDION_LABEL_WRAPPER_DIRECTIVE = new InjectionToken<AccordionLabelWrapperDirective>(
-  'AccordionLabelWrapperDirective',
-);

package/src/lib/components/accordion/partials/accordion-label-wrapper/accordion-label-wrapper.directive.ts

@@ -1,14 +0,0 @@
-import { CdkPortal } from '@angular/cdk/portal';
-import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ACCORDION_LABEL_WRAPPER_DIRECTIVE } from './accordion-label-wrapper.directive.constants';
-
-@Directive({
-  selector: 'ng-template[et-accordion-label-wrapper]',
-  providers: [{ provide: ACCORDION_LABEL_WRAPPER_DIRECTIVE, useExisting: AccordionLabelWrapperDirective }],
-  standalone: true,
-})
-export class AccordionLabelWrapperDirective extends CdkPortal {
-  constructor(templateRef: TemplateRef<unknown>, viewContainerRef: ViewContainerRef) {
-    super(templateRef, viewContainerRef);
-  }
-}

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

@@ -1,5 +0,0 @@
-import { BracketComponent } from './components/bracket';
-import { BracketMatchComponent } from './partials/bracket-match';
-import { BracketRoundHeaderComponent } from './partials/bracket-round-header';
-
-export const BracketImports = [BracketComponent, BracketMatchComponent, BracketRoundHeaderComponent] as const;

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

@@ -1,68 +0,0 @@
-@if (_bracket$ | async; as bracket) {
-  @for (round of bracket.bracketRounds; track trackByRound(roundIndex, round); let roundIndex = $index) {
-    @if (_config.roundHeaderComponent) {
-      <div
-        [style.--_cs]="round.column.start"
-        [style.--_ce]="round.column.end"
-        [style.--_rs]="
-          round.data.type === 'loser_bracket' || round.data.type === 'third_place'
-            ? round.row.start + 1
-            : round.row.start
-        "
-        [attr.special-align-end]="
-          round.data.type === 'third_place' &&
-          bracket.bracketType === 'single' &&
-          bracket.firstWinnerRound &&
-          bracket.firstWinnerRound.matches.length <= 4
-            ? 'true'
-            : 'false'
-        "
-        [attr.is-loser-round-header]="
-          (round.data.type === 'loser_bracket' || round.data.type === 'third_place') && bracket.bracketType === 'double'
-        "
-        class="et-bracket-round"
-      >
-        <ng-container *cdkPortalOutlet="createRoundPortal(round, _config.roundHeaderComponent)" />
-      </div>
-    }
-    <ng-container *etLet="bracket.bracketRounds[roundIndex - 1] ?? null as lastRound">
-      <ng-container *etLet="bracket.bracketRounds[roundIndex + 1] ?? null as nextRound">
-        @for (match of round.matches; track trackByMatch(matchIndex, match); let matchIndex = $index) {
-          @if (getConnectedMatches(match, bracket); as connectedMatches) {
-            <div
-              [style.--_cs]="round.column.start"
-              [style.--_ce]="round.column.end"
-              [style.--_rs]="
-                round.data.type === 'loser_bracket' || round.data.type === 'third_place'
-                  ? match.row.start + (_config.roundHeaderComponent ? 2 : 0)
-                  : match.row.start + (_config.roundHeaderComponent ? 1 : 0)
-              "
-              [style.--_re]="
-                round.data.type === 'loser_bracket' || round.data.type === 'third_place'
-                  ? match.row.end + (_config.roundHeaderComponent ? 2 : 0)
-                  : match.row.end + (_config.roundHeaderComponent ? 1 : 0)
-              "
-              [style.--_line-multi-after]="getLineMultiAfter(roundIndex, bracket)"
-              [attr.et-has-parents]="!!connectedMatches.previousMatches?.length"
-              [attr.et-has-child]="!!connectedMatches.nextMatch"
-              [attr.et-child-connector-shape]="getChildConnectorShape(match, connectedMatches.nextMatch)"
-              [attr.line-span-before]="getLineSpan(lastRound, lastRound, round, nextRound, bracket)"
-              [attr.line-span-current]="getLineSpan(round, lastRound, round, nextRound, bracket)"
-              [attr.line-span-after]="getLineSpan(nextRound, lastRound, round, nextRound, bracket)"
-              [attr.is-first-loser-round-match]="
-                (round.data.type === 'loser_bracket' || round.data.type === 'third_place') && matchIndex === 0
-              "
-              [attr.is-last-lower-bracket-match]="
-                round.data.type === 'loser_bracket' &&
-                (roundIndex === bracket.bracketRounds.length - 1 || nextRound?.data?.type === 'third_place')
-              "
-              class="et-bracket-match"
-            >
-              <ng-container *cdkPortalOutlet="createMatchPortal(match, _config.matchComponent)" />
-            </div>
-          }
-        }
-      </ng-container>
-    </ng-container>
-  }
-}

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

@@ -1,134 +0,0 @@
-.et-bracket {
-  --connection-color: rgb(101, 101, 101);
-  --connection-radius: 10px;
-  --connection-size: 1.5px;
-
-  display: grid;
-  grid-auto-columns: min-content;
-  column-gap: var(--_bracket-column-gap);
-  row-gap: var(--_bracket-row-gap);
-
-  .et-bracket-round {
-    grid-column: var(--_cs) / var(--_ce);
-    grid-row: var(--_rs) / var(--_rs);
-    height: var(--_round-header-height);
-
-    &[special-align-end='true'] {
-      /// This is only for once special case:
-      /// - It's a single elimination bracket
-      /// - There are only 2 or 4 matches in the first round
-      /// - It's the round header for the third place match
-      /// In this case the header will get positioned into the third row (instead of a special "header only" row).
-      /// If we don't align the header to the end, it will overlap with the final match.
-      align-self: flex-end;
-    }
-  }
-
-  &[has-round-headers='false'] {
-    &[is-first-loser-round-match='true'] {
-      margin-top: var(--_upper-lower-bracket-gap);
-    }
-  }
-
-  &[has-round-headers='true'] [is-loser-round-header='true'] {
-    margin-top: var(--_upper-lower-bracket-gap);
-  }
-
-  .et-bracket-match {
-    --_gap-x-half: calc(var(--_bracket-column-gap) / 2);
-    --_gap-y-half: calc(var(--_bracket-row-gap) / 2);
-    --_bracket-item-height-half: calc(var(--_bracket-item-height) / 2);
-    --_bracket-item-width-half: calc(var(--_bracket-item-width) / 2);
-    --_connection-size-half: calc(var(--connection-size) / 2);
-
-    position: relative;
-    grid-column: var(--_cs) / var(--_ce);
-    grid-row: var(--_rs) / var(--_re);
-
-    inline-size: var(--_bracket-item-width);
-    block-size: var(--_bracket-item-height);
-
-    justify-self: center;
-    align-self: center;
-
-    &[line-span-before='0'][line-span-current='0'] {
-      --_gap-full-width-before: var(--_bracket-column-gap);
-    }
-
-    &[line-span-before='2'][line-span-current='2'] {
-      --_gap-full-width-before: calc(var(--_bracket-column-gap) * 2 + var(--_bracket-item-width));
-    }
-
-    &[line-span-before='0'][line-span-current='2'],
-    &[line-span-before='2'][line-span-current='0'] {
-      --_gap-full-width-before: calc(
-        var(--_bracket-column-gap) + (var(--_bracket-item-width) / 2) + var(--_gap-x-half)
-      );
-    }
-
-    &[line-span-after='0'][line-span-current='0'] {
-      --_gap-full-width-after: var(--_bracket-column-gap);
-    }
-
-    &[line-span-after='2'][line-span-current='2'] {
-      --_gap-full-width-after: calc(var(--_bracket-column-gap) * 2 + var(--_bracket-item-width));
-    }
-
-    &[line-span-after='0'][line-span-current='2'],
-    &[line-span-after='2'][line-span-current='0'] {
-      --_gap-full-width-after: calc(var(--_bracket-column-gap) + (var(--_bracket-item-width) / 2) + var(--_gap-x-half));
-    }
-
-    &[et-has-parents='true'] {
-      &::before {
-        content: '';
-        position: absolute;
-        inline-size: calc(var(--_gap-full-width-before) / 2);
-        block-size: 0;
-        border-block-start: var(--connection-size) solid var(--connection-color);
-        inset-inline-end: 100%;
-        inset-block-start: calc(50% - var(--_connection-size-half));
-      }
-    }
-
-    &[et-has-child='true'] {
-      &::after {
-        --_height-multi: calc(var(--_bracket-item-height-half) * var(--_line-multi-after));
-        --_gap-y-multi: calc(var(--_gap-y-half) * var(--_line-multi-after));
-
-        content: '';
-        position: absolute;
-        inline-size: calc(var(--_gap-full-width-after) / 2);
-        block-size: calc(var(--_height-multi) + var(--_gap-y-multi));
-        inset-inline-start: 100%;
-      }
-
-      &[is-last-lower-bracket-match='true']::after {
-        --_height-multi: calc(
-          (var(--_bracket-item-height-half) * var(--_line-multi-after)) + var(--_upper-lower-bracket-gap) +
-            var(--_round-header-height)
-        );
-      }
-
-      &[et-child-connector-shape='down']::after {
-        border-block-start: var(--connection-size) solid var(--connection-color);
-        border-inline-end: var(--connection-size) solid var(--connection-color);
-        border-start-end-radius: var(--connection-radius);
-        inset-block-start: calc(50% - var(--_connection-size-half));
-      }
-
-      &[et-child-connector-shape='up']::after {
-        border-block-end: var(--connection-size) solid var(--connection-color);
-        border-inline-end: var(--connection-size) solid var(--connection-color);
-        border-end-end-radius: var(--connection-radius);
-        inset-block-end: calc(50% - var(--_connection-size-half));
-      }
-
-      &[et-child-connector-shape='straight']::after {
-        border-block-start: var(--connection-size) solid var(--connection-color);
-        inset-block-start: calc(50% - var(--_connection-size-half));
-        block-size: 0;
-      }
-    }
-  }
-}