Feat/accordion

.stylelintrc.json

@@ -3,6 +3,7 @@
   "ignoreFiles": ["node_modules/**", "dist/**"],
   "plugins": ["stylelint-scss"],
   "rules": {
+    "no-duplicate-selectors": null,
     "scss/dollar-variable-pattern": "[a-zA-Z0-9-_]*",
     "scss/at-mixin-pattern": "[a-zA-Z0-9-_]*",
     "scss/load-no-partial-leading-underscore": null,

.vscode/settings.json

@@ -1,13 +1,17 @@
 {
   "eslint.validate": ["json"],
+  "cSpell.dictionaries": ["lorem-ipsum"],
   "cSpell.words": [
     "autodocs",
     "camelcase",
     "Checkmark",
     "compodoc",
+    "cssmodule",
     "griffel",
+    "mixedmark",
     "ochin",
     "prismjs",
+    "radi",
     "sbdocs",
     "shiki",
     "shikijs",

apps/angular-kits-doc/stories/CDK/overlay/overlay/index.stories.ts

@@ -46,8 +46,8 @@ const meta: StoriesMeta = {
     },
     cckAddon: {
       componentName: 'overlay',
-      subcomponentNames: {
-        OverlayService: null,
+      subcomponents: {
+        OverlayService: { name: null },
       },
     },
   },

apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx

@@ -164,6 +164,9 @@ export function getMergeThemesStep3Scss() {
 @include Cocokits.components_avatar;
 @include Cocokits.components_avatar_group;
 @include Cocokits.components_avatar_label;
+@include Cocokits.components_accordion;
+@include Cocokits.components_accordion_header;
+@include Cocokits.components_accordion_panel;
 
   `);
 }

apps/angular-kits-doc/stories/ui-components/accordion/accordion/description.md

@@ -0,0 +1,29 @@
+The core wrapper that manages the state and structure of all panels. It handles global behavior such as single/multiple expansion, nesting, accessibility, and keyboard control.
+
+**Features:**
+- **Custom Icon Template:**
+Allow developers to define a custom template for the expand/collapse icon, supporting branding or UI consistency.
+
+- **Expansion Mode:**
+Support both single and multiple expanded panels simultaneously, configurable via input.
+
+- **Icon Position:**
+Provide option to render the expand/collapse icon on either the left or right side of the header.
+
+- **Custom Header:**
+Support default text headers or fully custom templates for complete flexibility in UI design.
+
+- **Toggle Animation:**
+Option to enable or disable transition animation for smoother or snappier UX.
+
+- **Disabled Panel:**
+Disable specific panels to prevent user interaction and indicate non-interactive state.
+
+- **Dynamic Control:**
+Expose imperative methods to programmatically expand or collapse individual panels or groups.
+
+- **Expand/Collapse All:**
+Allow batch toggle actions to expand or collapse all panels at once, useful in dashboards or summaries.
+
+- **Nested Support:**
+Support placing accordions inside accordion content, enabling complex hierarchical layouts.

apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts

@@ -0,0 +1,84 @@
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+
+import {
+  AccordionComponent,
+  AccordionHeaderComponent,
+  AccordionHeaderIconTemplateDirective,
+  AccordionPanelComponent,
+} from '@cocokits/angular-accordion';
+import { IconButtonComponent } from '@cocokits/angular-button';
+import { SvgIconComponent } from '@cocokits/angular-icon';
+import { StoriesMeta, withThemeConfigProvider, withWrapperDecorator } from '@cocokits/storybook-addon-theme-angular';
+
+import descriptionMd from './description.md';
+import ngTemplateMd from './ng-templates.md';
+
+export { Default } from './overview/default.stories';
+export { Type } from './overview/type.stories';
+export { Size } from './overview/size.stories';
+export { Color } from './overview/color.stories';
+export { Disabled } from './overview/disabled.stories';
+export { CustomIcon } from './overview/custom-icon.stories';
+export { Nested } from './overview/nested.stories';
+export { Control } from './overview/control.stories';
+
+const meta: StoriesMeta = {
+  component: AccordionComponent,
+  title: 'UI Components/Accordion',
+  tags: ['status:new'],
+  subcomponents: [AccordionPanelComponent, AccordionHeaderComponent],
+  decorators: [
+    withWrapperDecorator({ insideBox: true }, { width: '400px' }),
+    applicationConfig({
+      providers: [withThemeConfigProvider()],
+    }),
+    moduleMetadata({
+      imports: [
+        IconButtonComponent,
+        SvgIconComponent,
+        AccordionPanelComponent,
+        AccordionHeaderComponent,
+        AccordionHeaderIconTemplateDirective,
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+    cckAddon: {
+      componentName: 'accordion',
+      ngTemplateMarkdown: ngTemplateMd,
+      subcomponents: {
+        AccordionPanelComponent: {
+          name: 'accordionPanel',
+          description:
+            'A collapsible section inside an accordion. Each panel works independently but syncs with the parent for state tracking and expansion logic.',
+          argsTypes: {
+            value: {
+              table: {
+                type: { summary: 'TValue[] | TValue' },
+                defaultValue: { summary: 'A unique ID is generated automatically' },
+              },
+            },
+            disabled: { table: { type: { summary: 'boolean' }, defaultValue: { summary: '' } } },
+          },
+        },
+        AccordionHeaderComponent: {
+          name: 'accordionHeader',
+          description:
+            'Acts as the toggle button for the panel. It can be styled or fully replaced using custom children, enabling full flexibility in the header’s layout and content.',
+        },
+      },
+    },
+  },
+  argTypes: {
+    expanded: { table: { type: { summary: 'TValue[] | TValue' }, defaultValue: { summary: '' } } },
+    expandedChange: { table: { category: 'outputs', type: { summary: 'TValue[] | TValue' } } },
+    iconPosition: { table: { type: { summary: 'left | right' }, defaultValue: { summary: 'right' } } },
+    toggleTrigger: { table: { type: { summary: 'header | icon' }, defaultValue: { summary: 'header' } } },
+  },
+};
+export default meta;

apps/angular-kits-doc/stories/ui-components/accordion/accordion/ng-templates.md

@@ -0,0 +1,39 @@
+### Custom Accordion Header Icon
+Use this template to display a custom icon inside the accordion header. This is helpful when you want full control over how the expand/collapse icon looks or behaves depending on the state of the accordion.
+
+**Selector:** `ng-template[cckAccordionHeaderIcon]`
+
+**Reference:** `AccordionHeaderIconTemplateDirective`
+
+
+It can be defined at two levels:
+
+- Under `cck-accordion:` applies to all panels
+- Under each `cck-accordion-panel`: applies only to the target panel
+
+
+**Context Properties:**
+
+| Name          | Type      | Description                          |
+|---------------|------ ----|--------------------------------------|
+| `isExpanded`  | `boolean` | Whether the accordion is expanded.   |
+| `disabled  `  | `boolean` | Whether the accordion is disabled.   |
+
+**Usage Example:**
+
+```html
+<cck-accordion>
+  <ng-template cckAccordionHeaderIcon let-isExpanded="isExpanded" let-disabled="disabled">
+    <button cck-icon-button>
+      <cck-svg-icon
+        [icon]="isExpanded ? Icons.arrowUp : Icons.arrowDown"
+        [style.opacity]="disabled ? 0.5 : 1"
+      />
+    </button>
+  </ng-template>
+</cck-accordion>
+```
+
+For advance example check the overview tab
+
+**Important:** When this template is used, the default expand/collapse icon along with all its functionality (such as animation, hover effects, etc.) will be removed. However, the click handler remains unchanged, and only the custom icon from your template will be rendered.

apps/angular-kits-doc/stories/ui-components/accordion/accordion/overview/color.stories.ts

@@ -0,0 +1,75 @@
+import { AccordionComponent } from '@cocokits/angular-accordion';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<AccordionComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color options enable seamless integration with various themes or to highlight specific actions.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+            <cck-accordion
+              <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+              color='<%= color %>'
+            >
+              <cck-accordion-panel>
+                <cck-accordion-header>Accordion Header 1</cck-accordion-header>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </cck-accordion-panel>
+
+              <cck-accordion-panel>
+                <cck-accordion-header>Accordion Header 2</cck-accordion-header>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </cck-accordion-panel>
+
+              <cck-accordion-panel>
+                <cck-accordion-header>Accordion Header 3</cck-accordion-header>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </cck-accordion-panel>
+            </cck-accordion>
+          <% }) %>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <h4 class='cck-doc-story__header'>{{color}}</h4>
+        <cck-accordion [type]="cckControl.type" [color]="color">
+          <h5 style="width: 100%; margin: 0">{{ color }}</h5>
+          <cck-accordion-panel>
+            <cck-accordion-header>Accordion Header 1</cck-accordion-header>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </cck-accordion-panel>
+
+          <cck-accordion-panel>
+            <cck-accordion-header>Accordion Header 2</cck-accordion-header>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </cck-accordion-panel>
+
+          <cck-accordion-panel>
+            <cck-accordion-header>Accordion Header 3</cck-accordion-header>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </cck-accordion-panel>
+        </cck-accordion>
+      }
+    `,
+  }),
+};