@ethlete/cdk 4.27.3 → 4.28.0

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "et"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": ["element", "attribute"],
+            "prefix": "et",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-host-metadata-property": "off",
+        "@angular-eslint/no-input-rename": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "off"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/cdk
 
+## 4.28.0
+
+### Minor Changes
+
+- [`99e618a`](https://github.com/ethlete-io/ethdk/commit/99e618aa85c146946d11bbd5418979d22c1203e7) Thanks [@TomTomB](https://github.com/TomTomB)! - Add `closeOnInteraction` input to menu checkbox and radio item
+
 ## 4.27.3
 
 ### Patch Changes

package/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'cdk',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../coverage/libs/cdk',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/cdk",
+  "assets": ["CHANGELOG.md", "./src/lib/styles/**/*"],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,37 +1,24 @@
 {
   "name": "@ethlete/cdk",
-  "version": "4.27.3",
+  "version": "4.28.0",
   "exports": {
     ".": {
-      "css": "./src/lib/styles/index.css",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ethlete-cdk.mjs",
-      "esm": "./esm2022/ethlete-cdk.mjs",
-      "default": "./fesm2022/ethlete-cdk.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "css": "./src/lib/styles/index.css"
     }
   },
   "peerDependencies": {
-    "@angular/animations": "18.0.5",
-    "@angular/cdk": "18.0.5",
-    "@angular/common": "18.0.5",
-    "@angular/core": "18.0.5",
-    "@angular/forms": "18.0.5",
-    "@angular/platform-browser": "18.0.5",
-    "@angular/router": "18.0.5",
+    "@angular/animations": "18.0.6",
+    "@angular/cdk": "18.0.6",
+    "@angular/common": "18.0.6",
+    "@angular/core": "18.0.6",
+    "@angular/forms": "18.0.6",
+    "@angular/platform-browser": "18.0.6",
+    "@angular/router": "18.0.6",
     "@ethlete/core": "^4.0.3",
     "@ethlete/query": "^5.0.3",
     "@ethlete/theming": "^2.3.1",
     "@ethlete/types": "^1.6.2",
     "@floating-ui/dom": "^1.5.3",
     "rxjs": "^7.8.1"
-  },
-  "module": "fesm2022/ethlete-cdk.mjs",
-  "typings": "index.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0"
   }
-}
+}

package/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "cdk",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/cdk/src",
+  "prefix": "ethlete",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/libs/cdk"],
+      "options": {
+        "project": "libs/cdk/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/cdk/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/cdk/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/cdk"],
+      "options": {
+        "jestConfig": "libs/cdk/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  },
+  "tags": []
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+/* eslint-disable no-restricted-imports */
+export * from './lib/components/accordion/public-api';
+export * from './lib/components/bracket/public-api';
+export * from './lib/components/button/public-api';
+export * from './lib/components/carousel/public-api';
+export * from './lib/components/filter/public-api';
+export * from './lib/components/forms/public-api';
+export * from './lib/components/icons/public-api';
+export * from './lib/components/masonry/public-api';
+export * from './lib/components/overlay/public-api';
+export * from './lib/components/pagination/public-api';
+export * from './lib/components/picture/public-api';
+export * from './lib/components/progress-spinner';
+export * from './lib/components/query-error/public-api';
+export * from './lib/components/scrollable/public-api';
+export * from './lib/components/skeleton/public-api';
+export * from './lib/components/sort/public-api';
+export * from './lib/components/table/public-api';
+export * from './lib/components/tabs/public-api';
+export * from './lib/services';
+export * from './lib/types';
+export * from './lib/utils';
+
+// Burst cache

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

@@ -0,0 +1,15 @@
+import { AccordionComponent } from './components/accordion';
+import { AccordionGroupComponent } from './components/accordion-group';
+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';
+
+export const AccordionImports = [
+  AccordionHintDirective,
+  AccordionHintWrapperDirective,
+  AccordionLabelDirective,
+  AccordionLabelWrapperDirective,
+  AccordionComponent,
+  AccordionGroupComponent,
+] as const;

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

@@ -0,0 +1,9 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const accordionAnimations = {
+  animateOpenClose: trigger('animateOpenClose', [
+    state('close, void', style({ height: '0px', visibility: 'hidden' })),
+    state('open', style({ height: '*', visibility: 'visible' })),
+    transition('open <=> close, void => close', animate('300ms cubic-bezier(0.25, 0, 0.1, 1)')),
+  ]),
+};

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

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { AccordionComponent } from './accordion.component';
+
+export const ACCORDION_COMPONENT = new InjectionToken<AccordionComponent>('AccordionComponent');

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

@@ -0,0 +1,50 @@
+# Accordion
+
+The accordion is a collapsible component that can be used to display content on demand.
+
+### Basic usage
+
+```html
+<et-accordion label="Some accordion">
+  <p>My content</p>
+</et-accordion>
+```
+
+### Customizing the accordion label
+
+A custom label template can be provided to the accordion component by adding a `ng-template` with the `et-accordion-label-wrapper` directive applied.
+The `et-accordion-label` directive is optional. It only provides fitting styles to the label.
+
+**Do not** place any interactive elements in the label template.
+
+```html
+<et-accordion>
+  <ng-template et-accordion-label-wrapper>
+    <span et-accordion-label>Custom label</span>
+  </ng-template>
+
+  <p>My content</p>
+</et-accordion>
+```
+
+### Hint text
+
+A hint can be displayed next to the accordion chevron icon.
+It will be displayed on screen sizes from md and up.
+The `et-accordion-hint` directive is optional. It only provides fitting styles to the hint.
+
+**Do not** place any interactive elements in the hint template.
+
+```html
+<et-accordion label="Some accordion">
+  <ng-template et-accordion-hint-wrapper>
+    <span et-accordion-hint> Hint text </span>
+  </ng-template>
+
+  <p>My content</p>
+</et-accordion>
+```
+
+#### Related docs:
+
+- [Accordion group](/story/cdk-accordion-group--default)

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

@@ -0,0 +1,40 @@
+<div *etLet="_isOpen$ | async as isOpen" class="et-accordion-container">
+  <h3 class="et-accordion-header-wrapper">
+    <button
+      [disabled]="disabled"
+      [id]="headerId"
+      [attr.aria-controls]="bodyId"
+      [attr.aria-expanded]="isOpen"
+      [class.et-accordion-has-hint]="!!templateHint"
+      (click)="toggleAccordionOpen()"
+      class="et-accordion-header"
+      type="button"
+    >
+      <div>
+        @if (templateLabel) {
+          <ng-template [cdkPortalOutlet]="templateLabel" />
+        } @else {
+          <span et-accordion-label>{{ label }} </span>
+        }
+      </div>
+
+      @if (templateHint) {
+        <ng-template [cdkPortalOutlet]="templateHint" />
+      }
+
+      <et-chevron-icon />
+    </button>
+  </h3>
+  <div
+    [@animateOpenClose]="(_isOpen$ | async) ? 'open' : 'close'"
+    [attr.aria-labelledby]="headerId"
+    [id]="bodyId"
+    class="et-accordion-body"
+    role="region"
+  >
+    <div class="et-accordion-body-container">
+      <ng-content />
+    </div>
+  </div>
+  <hr class="et-accordion-separator" />
+</div>

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

@@ -0,0 +1,58 @@
+:where(.et-accordion) {
+  --chevron-size: 15px;
+}
+
+.et-accordion {
+  .et-accordion-container {
+    position: relative;
+    z-index: 1;
+  }
+
+  .et-chevron-icon {
+    display: block;
+    transform: rotate(180deg);
+    transition: transform 0.3s var(--ease-5);
+    inline-size: var(--chevron-size);
+    block-size: var(--chevron-size);
+  }
+
+  [aria-expanded='true'] {
+    .et-chevron-icon {
+      transform: rotate(0deg);
+    }
+  }
+
+  .et-accordion-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    inline-size: 100%;
+    block-size: 100%;
+    text-align: left;
+    background-color: transparent;
+    border: none;
+    align-items: center;
+    padding: 0;
+    gap: 15px;
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
+    &.et-accordion-has-hint {
+      grid-template-columns: 1fr auto auto;
+    }
+  }
+
+  .et-accordion-header-wrapper {
+    margin: 0;
+  }
+
+  .et-accordion-body {
+    overflow: hidden;
+  }
+
+  .et-accordion-separator {
+    position: relative;
+    z-index: -1;
+  }
+}

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

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

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

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

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