From c43fa881ca29925fbdf7bff9d52c72d1b332cfa9 Mon Sep 17 00:00:00 2001 From: Laszlo Ilonka Date: Wed, 8 Apr 2026 11:49:28 +0200 Subject: [PATCH] feat: wrap accordion summary button in headings(h1, h2, h3...) feat: add ul / li attribute selectors to accordion related components --- .../accordion/accordion-demo.component.html | 18 +++-- .../pages/accordion/accordion-demo.service.ts | 10 ++- .../widgets/accordion/accordion-defaults.ts | 10 ++- .../accordion-item.component.html | 77 +++++++++++++++---- .../accordion-item.component.ts | 9 ++- .../widgets/accordion/accordion.component.ts | 8 +- projects/widgets/accordion/public-api.ts | 1 + .../types/accordion-heading-level.type.ts | 10 +++ 8 files changed, 112 insertions(+), 31 deletions(-) create mode 100644 projects/widgets/accordion/types/accordion-heading-level.type.ts diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.component.html b/projects/demo/src/app/pages/accordion/accordion-demo.component.html index 9763bb6b..3de6a03b 100644 --- a/projects/demo/src/app/pages/accordion/accordion-demo.component.html +++ b/projects/demo/src/app/pages/accordion/accordion-demo.component.html @@ -2,10 +2,12 @@
- - +
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - +
    • +
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - +
    • +
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - +
    • +
    diff --git a/projects/demo/src/app/pages/accordion/accordion-demo.service.ts b/projects/demo/src/app/pages/accordion/accordion-demo.service.ts index f2909e3b..22276c22 100644 --- a/projects/demo/src/app/pages/accordion/accordion-demo.service.ts +++ b/projects/demo/src/app/pages/accordion/accordion-demo.service.ts @@ -3,7 +3,7 @@ import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; import { DemoMethodConfig } from '@demo-types/demo-method.type'; import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionAppearance, IdsAccordionAppearanceType } from '@i-cell/ids-angular/accordion'; +import { IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionAppearance, IdsAccordionAppearanceType, IdsAccordionHeadingLevel, IdsAccordionHeadingLevelType } from '@i-cell/ids-angular/accordion'; import { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType } from '@i-cell/ids-angular/button'; import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; import { Subject } from 'rxjs'; @@ -13,6 +13,7 @@ const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(); type AccordionInputControls = { size: IdsSizeType; appearance: IdsAccordionAppearanceType; + headingLevel: IdsAccordionHeadingLevelType; summary: string; disabled: boolean; multi: boolean; @@ -45,6 +46,13 @@ export class AccordionDemoService { control: DemoControl.SELECT, list: convertEnumToStringArray(IdsAccordionAppearance), }, + headingLevel: { + description: 'Heading level.', + type: 'IdsAccordionHeadingLevelType', + default: defaultConfig.headingLevel, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsAccordionHeadingLevel), + }, summary: { description: 'Summary of accordion', type: 'string', diff --git a/projects/widgets/accordion/accordion-defaults.ts b/projects/widgets/accordion/accordion-defaults.ts index 2b2b73ff..e11fa44f 100644 --- a/projects/widgets/accordion/accordion-defaults.ts +++ b/projects/widgets/accordion/accordion-defaults.ts @@ -1,12 +1,19 @@ import { IdsAccordionAppearance, IdsAccordionAppearanceType } from './types/accordion-appearance.type'; +import { IdsAccordionHeadingLevel, IdsAccordionHeadingLevelType } from './types/accordion-heading-level.type'; import { InjectionToken } from '@angular/core'; -import { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType } from '@i-cell/ids-angular/button'; +import { + IdsButtonAppearance, + IdsButtonAppearanceType, + IdsButtonVariant, + IdsButtonVariantType, +} from '@i-cell/ids-angular/button'; import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; export interface IdsAccordionDefaultConfig { size?: IdsSizeType appearance?: IdsAccordionAppearanceType + headingLevel?: IdsAccordionHeadingLevelType, multi?: boolean, btnSize?: IdsSizeType, btnAppearance?: IdsButtonAppearanceType, @@ -29,6 +36,7 @@ export function IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(): Required - @if (_parentOrSelfHasLeadingIcon()) { - +@switch (_parentHeadingLevel()) { + @case ('h1') { +

    + +

    } - {{ summary() }} - @if (_parentOrSelfHasTrailingIcon()) { - + @case ('h2') { +

    + +

    } - + @case ('h3') { +

    + +

    + } + @case ('h4') { +

    + +

    + } + @case ('h5') { +
    + +
    + } + @case ('h6') { +
    + +
    + } + @default { +

    + +

    + } +} + + + +
    this._accordion.hasLeadingIcon() ?? this.hasLeadingIcon()); protected _parentOrSelfHasTrailingIcon = computed(() => this._accordion.hasTrailingIcon() ?? this.hasTrailingIcon()); protected _parentOrSelfDisabled = computed(() => this._accordion.disabled() || this.disabled()); + protected _parentHeadingLevel = computed(() => this._accordion.headingLevel()); protected _hostClasses = computed(() => this._getHostClasses( [this._parentOrSelfDisabled() ? 'disabled' : null], diff --git a/projects/widgets/accordion/accordion.component.ts b/projects/widgets/accordion/accordion.component.ts index c6e8c14d..20b98808 100644 --- a/projects/widgets/accordion/accordion.component.ts +++ b/projects/widgets/accordion/accordion.component.ts @@ -1,6 +1,7 @@ import { IDS_ACCORDION_DEFAULT_CONFIG, IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionDefaultConfig } from './accordion-defaults'; import { IdsAccordionItemComponent } from './accordion-item/accordion-item.component'; import { IdsAccordionAppearanceType } from './types/accordion-appearance.type'; +import { IdsAccordionHeadingLevelType } from './types/accordion-heading-level.type'; import { CdkAccordion } from '@angular/cdk/accordion'; import { ChangeDetectionStrategy, Component, computed, contentChildren, inject, input, ViewEncapsulation } from '@angular/core'; @@ -10,7 +11,7 @@ import { coerceBooleanAttribute, coerceStringAttribute, ComponentBaseWithDefault const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(); @Component({ - selector: 'ids-accordion', + selector: 'ids-accordion, ul[idsAccordion]', imports: [IdsButtonComponent], templateUrl: './accordion.component.html', encapsulation: ViewEncapsulation.None, @@ -41,6 +42,7 @@ export class IdsAccordionComponent extends ComponentBaseWithDefaults(this._defaultConfig.multi); + public headingLevel = input(this._defaultConfig.headingLevel); public btnSize = input(this._defaultConfig.btnSize); public btnAppearance = input(this._defaultConfig.btnAppearance); public btnVariant = input(this._defaultConfig.btnVariant); @@ -51,8 +53,10 @@ export class IdsAccordionComponent extends ComponentBaseWithDefaults `${this.id()}-collapse-btn`); protected _hostClasses = computed(() => this._getHostClasses([ + 'ids-accordion', this.size(), this.appearance(), + this.headingLevel(), this.disabled() ? 'disabled' : null, ])); @@ -86,7 +90,7 @@ export class IdsAccordionComponent extends ComponentBaseWithDefaults item.id() === accordionId); switch (event.key) { diff --git a/projects/widgets/accordion/public-api.ts b/projects/widgets/accordion/public-api.ts index 22461b7d..1cda067d 100644 --- a/projects/widgets/accordion/public-api.ts +++ b/projects/widgets/accordion/public-api.ts @@ -1,5 +1,6 @@ export * from './accordion-item/accordion-item.component'; export * from './types/accordion-appearance.type'; +export * from './types/accordion-heading-level.type'; export * from './accordion-animations'; export * from './accordion-defaults'; export * from './accordion.component'; diff --git a/projects/widgets/accordion/types/accordion-heading-level.type.ts b/projects/widgets/accordion/types/accordion-heading-level.type.ts new file mode 100644 index 00000000..eb7a325f --- /dev/null +++ b/projects/widgets/accordion/types/accordion-heading-level.type.ts @@ -0,0 +1,10 @@ +export const IdsAccordionHeadingLevel = { + H1: 'h1', + H2: 'h2', + H3: 'h3', + H4: 'h4', + H5: 'h5', + H6: 'h6', +} as const; + +export type IdsAccordionHeadingLevelType = (typeof IdsAccordionHeadingLevel)[keyof typeof IdsAccordionHeadingLevel];