simple-accordian 0.0.1 → 0.0.3

package/README.md

@@ -1,63 +1,180 @@
-# Accordian
+Accordion Component
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+A lightweight, reusable, and standalone Angular Accordion component.
+Supports single or multiple open items, disabled items, and is fully configurable via inputs.
+Built to be library-ready, easy to integrate, and works out-of-the-box in Angular 16+ projects.
 
-## Code scaffolding
+✨ Features
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+🧱 Standalone Angular component
 
-```bash
-ng generate component component-name
-```
+📦 npm publish ready
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+📑 Single or multiple items open at once
 
-```bash
-ng generate --help
-```
+🚫 Disable individual accordion items
 
-## Building
+🎨 Fully configurable via inputs
 
-To build the library, run:
+💻 Lightweight and reusable
+
+✅ No module imports required
+
+📦 Installation
+
+Install the package using npm:
+
+npm install accordian
+
+
+Requirements
+
+Angular 16+
+
+Standalone components enabled (default in Angular 16+)
+
+🚀 Basic Usage
+
+Use the component directly in your templates:
+
+<simple-accordian [items]="items" [multiple]="false"></simple-accordian>
+
+
+No module imports are required because the component is standalone.
+
+🧩 Configuration Details
+
+The accordion is fully configured via the items input and optional multiple input.
+
+Boolean Input
+<simple-accordian [multiple]="true"></simple-accordian>
+
+
+📘 API Reference
+
+Component: simple-accordian
+
+Inputs
+Input	Type	Default	Description
+items	AccordionItemInterface[]	[]	Array of accordion items. Each item can have title, content, open, and disabled.
+multiple	boolean	false	Allows multiple items to be open at the same time.
+Item Interface
+export interface AccordionItemInterface {
+  title: string;
+  content: string;
+  open?: boolean;     // Open by default
+  disabled?: boolean; // Disable the item
+}
+
+Example Items
+items: AccordionItemInterface[] = [
+  { title: 'Item 1', content: 'Content 1' },
+  { title: 'Item 2', content: 'Content 2', disabled: true }, // Disabled
+  { title: 'Item 3', content: 'Content 3' }
+];
+
+Template Usage
+<simple-accordian [items]="items" [multiple]="false"></simple-accordian>
+
+
+🎨 Styling
+
+The component comes with a default CSS file (accordian.css) that can be customized:
+
+.accordion-header.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+🏗️ Building the Library
 
-```bash
 ng build accordian
-```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-### Publishing the Library
+Build output:
+
+dist/accordian
+
+
+📤 Publishing
+
+cd dist/accordian
+npm publish --access public
+
+
+🤝 Contribution Guidelines
+
+Contributions are welcome!
+
+How to contribute
+
+Fork the repository
+
+Create a new branch:
+
+git checkout -b feature/your-feature-name
+
+
+Make your changes
+
+Commit with a clear message:
+
+git commit -m "feat: add new feature"
+
+
+Push and open a Pull Request
+
+Contribution rules
+
+Follow existing code style
+
+Keep components reusable and generic
+
+Avoid breaking changes unless necessary
+
+Update README if you add new features
+
+🐞 Troubleshooting & Bug Reports
+
+If you encounter bugs:
+
+Check existing issues first
+
+Open a new issue with:
+
+Angular version
+
+Browser
+
+Minimal reproduction (code or repo)
+
+Screenshots if UI-related
+
+📍 Report issues here:
+👉 GitHub Issues page (link
+)
 
-Once the project is built, you can publish your library by following these steps:
+♿ Accessibility
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/accordian
-   ```
+Uses semantic HTML and buttons
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Disabled items prevent interaction
 
-## Running unit tests
+Works with keyboard navigation
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+🛣️ Roadmap
 
-```bash
-ng test
-```
+Icon support (expand/collapse)
 
-## Running end-to-end tests
+Animation enhancements
 
-For end-to-end (e2e) testing, run:
+CSS variables for theming
 
-```bash
-ng e2e
-```
+Angular Elements / Web Component support
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+Storybook documentation
 
-## Additional Resources
+📄 License
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT License © 2025

package/fesm2022/{accordian.mjs → simple-accordian.mjs}

@@ -43,4 +43,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  */
 
 export { Accordian };
-//# sourceMappingURL=accordian.mjs.map
+//# sourceMappingURL=simple-accordian.mjs.map

package/fesm2022/simple-accordian.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-accordian.mjs","sources":["../../../projects/accordian/src/lib/accordian/accordian.ts","../../../projects/accordian/src/lib/accordian/accordian.html","../../../projects/accordian/src/public-api.ts","../../../projects/accordian/src/simple-accordian.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\nexport interface AccordionItemInterface {\r\n  title: string;\r\n  content: string;\r\n  open?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'simple-accordian',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './accordian.html',\r\n  styleUrls: ['./accordian.css']\r\n})\r\nexport class Accordian {\r\n\r\n  //for the inputs of the accordian component\r\n  @Input() items: AccordionItemInterface[] = []; // Array of accordion items\r\n  @Input() multiple = false; // Allow multiple sections to be open simultaneously\r\n\r\n  //function to toggle the accordian items\r\n  toggle(index: number) {\r\n    const clicked = this.items[index];\r\n    if (clicked.disabled) return;\r\n\r\n    this.items = this.items.map((item, i) => {\r\n      if (this.multiple) {\r\n        return i === index\r\n          ? { ...item, open: !item.open }\r\n          : item;\r\n      }\r\n\r\n      return i === index\r\n        ? { ...item, open: !item.open }\r\n        : { ...item, open: false };\r\n    });\r\n  }\r\n}\r\n","<div class=\"accordion\">\r\n  @for (item of items; track $index; let i = $index) {\r\n    <div class=\"accordion-item\">\r\n      <button\r\n        class=\"accordion-header\"\r\n        (click)=\"toggle(i)\"\r\n        [class.active]=\"item.open\"\r\n        [disabled]=\"item.disabled\">\r\n\r\n        <span>{{ item.title }}</span>\r\n        <span class=\"icon\">{{ item.open ? '−' : '+' }}</span>\r\n      </button>\r\n\r\n      <div class=\"accordion-body\" [class.open]=\"item.open\">\r\n        <div class=\"accordion-content\">\r\n          {{ item.content }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n","/*\r\n * Public API Surface of accordian\r\n */\r\n\r\nexport * from './lib/accordian/accordian';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAiBa,SAAS,CAAA;;AAGX,IAAA,KAAK,GAA6B,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,KAAK,CAAC;;AAG1B,IAAA,MAAM,CAAC,KAAa,EAAA;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACjC,IAAI,OAAO,CAAC,QAAQ;YAAE;AAEtB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACtC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO,CAAC,KAAK;sBACT,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;sBAC3B,IAAI;YACV;YAEA,OAAO,CAAC,KAAK;kBACT,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;kBAC3B,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;AAC9B,QAAA,CAAC,CAAC;IACJ;uGAtBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtB,qoBAqBA,EAAA,MAAA,EAAA,CAAA,ixCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDRY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,qoBAAA,EAAA,MAAA,EAAA,CAAA,ixCAAA,CAAA,EAAA;;sBAOtB;;sBACA;;;AErBH;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-accordian",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^21.1.0",
     "@angular/core": "^21.1.0"
@@ -9,25 +9,15 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/accordian.mjs",
-  "typings": "types/accordian.d.ts",
+  "module": "fesm2022/simple-accordian.mjs",
+  "typings": "types/simple-accordian.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./types/accordian.d.ts",
-      "default": "./fesm2022/accordian.mjs"
+      "types": "./types/simple-accordian.d.ts",
+      "default": "./fesm2022/simple-accordian.mjs"
     }
-  },
-  "description": "a simple, mobile responsive accordian component to use by just passing the item's array and the property multiple to maintain whether single or multiple components can be open at the same time",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "accordian"
-  ],
-  "author": "Debdip",
-  "license": "ISC"
-}
+  }
+}

package/fesm2022/accordian.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordian.mjs","sources":["../../../projects/accordian/src/lib/accordian/accordian.ts","../../../projects/accordian/src/lib/accordian/accordian.html","../../../projects/accordian/src/public-api.ts","../../../projects/accordian/src/accordian.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\nexport interface AccordionItemInterface {\r\n  title: string;\r\n  content: string;\r\n  open?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'simple-accordian',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './accordian.html',\r\n  styleUrls: ['./accordian.css']\r\n})\r\nexport class Accordian {\r\n\r\n  //for the inputs of the accordian component\r\n  @Input() items: AccordionItemInterface[] = []; // Array of accordion items\r\n  @Input() multiple = false; // Allow multiple sections to be open simultaneously\r\n\r\n  //function to toggle the accordian items\r\n  toggle(index: number) {\r\n    const clicked = this.items[index];\r\n    if (clicked.disabled) return;\r\n\r\n    this.items = this.items.map((item, i) => {\r\n      if (this.multiple) {\r\n        return i === index\r\n          ? { ...item, open: !item.open }\r\n          : item;\r\n      }\r\n\r\n      return i === index\r\n        ? { ...item, open: !item.open }\r\n        : { ...item, open: false };\r\n    });\r\n  }\r\n}\r\n","<div class=\"accordion\">\r\n  @for (item of items; track $index; let i = $index) {\r\n    <div class=\"accordion-item\">\r\n      <button\r\n        class=\"accordion-header\"\r\n        (click)=\"toggle(i)\"\r\n        [class.active]=\"item.open\"\r\n        [disabled]=\"item.disabled\">\r\n\r\n        <span>{{ item.title }}</span>\r\n        <span class=\"icon\">{{ item.open ? '−' : '+' }}</span>\r\n      </button>\r\n\r\n      <div class=\"accordion-body\" [class.open]=\"item.open\">\r\n        <div class=\"accordion-content\">\r\n          {{ item.content }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n","/*\r\n * Public API Surface of accordian\r\n */\r\n\r\nexport * from './lib/accordian/accordian';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAiBa,SAAS,CAAA;;AAGX,IAAA,KAAK,GAA6B,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,KAAK,CAAC;;AAG1B,IAAA,MAAM,CAAC,KAAa,EAAA;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACjC,IAAI,OAAO,CAAC,QAAQ;YAAE;AAEtB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACtC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO,CAAC,KAAK;sBACT,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;sBAC3B,IAAI;YACV;YAEA,OAAO,CAAC,KAAK;kBACT,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;kBAC3B,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;AAC9B,QAAA,CAAC,CAAC;IACJ;uGAtBW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtB,qoBAqBA,EAAA,MAAA,EAAA,CAAA,ixCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDRY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,SAAS,EAAA,UAAA,EAAA,CAAA;kBAPrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,UAAA,EAChB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,qoBAAA,EAAA,MAAA,EAAA,CAAA,ixCAAA,CAAA,EAAA;;sBAOtB;;sBACA;;;AErBH;;AAEG;;ACFH;;AAEG;;;;"}