simple-accordian 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+# Accordian
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build accordian
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/accordian
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+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.

package/fesm2022/accordian.mjs

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, Component } from '@angular/core';
+
+class Accordian {
+    //for the inputs of the accordian component
+    items = []; // Array of accordion items
+    multiple = false; // Allow multiple sections to be open simultaneously
+    //function to toggle the accordian items
+    toggle(index) {
+        const clicked = this.items[index];
+        if (clicked.disabled)
+            return;
+        this.items = this.items.map((item, i) => {
+            if (this.multiple) {
+                return i === index
+                    ? { ...item, open: !item.open }
+                    : item;
+            }
+            return i === index
+                ? { ...item, open: !item.open }
+                : { ...item, open: false };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Accordian, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Accordian, isStandalone: true, selector: "simple-accordian", inputs: { items: "items", multiple: "multiple" }, ngImport: i0, template: "<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 ? '\u2212' : '+' }}</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", styles: [":host{display:block;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.accordion{width:100%;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}.accordion-item{border-bottom:1px solid #e5e7eb}.accordion-item:last-child{border-bottom:none}.accordion-header{width:100%;background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:15px;font-weight:600;color:#111827;transition:background .2s ease,color .2s ease}.accordion-header:hover{background:#f9fafb}.accordion-header.active{background:#f3f4f6}.accordion-header:disabled{cursor:not-allowed;color:#9ca3af;background:#fafafa}.icon{font-size:20px;font-weight:400;line-height:1;transition:transform .25s ease}.accordion-header.active .icon{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .3s ease}.accordion-body.open{max-height:500px}.accordion-content{padding:14px 18px 18px;font-size:14px;line-height:1.6;color:#374151;background:#fff}.accordion-body.open .accordion-content{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Accordian, decorators: [{
+            type: Component,
+            args: [{ selector: 'simple-accordian', standalone: true, imports: [CommonModule], template: "<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 ? '\u2212' : '+' }}</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", styles: [":host{display:block;width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.accordion{width:100%;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}.accordion-item{border-bottom:1px solid #e5e7eb}.accordion-item:last-child{border-bottom:none}.accordion-header{width:100%;background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:15px;font-weight:600;color:#111827;transition:background .2s ease,color .2s ease}.accordion-header:hover{background:#f9fafb}.accordion-header.active{background:#f3f4f6}.accordion-header:disabled{cursor:not-allowed;color:#9ca3af;background:#fafafa}.icon{font-size:20px;font-weight:400;line-height:1;transition:transform .25s ease}.accordion-header.active .icon{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height .3s ease}.accordion-body.open{max-height:500px}.accordion-content{padding:14px 18px 18px;font-size:14px;line-height:1.6;color:#374151;background:#fff}.accordion-body.open .accordion-content{animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of accordian
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accordian };
+//# sourceMappingURL=accordian.mjs.map

package/fesm2022/accordian.mjs.map

@@ -0,0 +1 @@
+{"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;;;;"}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "simple-accordian",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/accordian.mjs",
+  "typings": "types/accordian.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/accordian.d.ts",
+      "default": "./fesm2022/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/types/accordian.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from '@angular/core';
+
+interface AccordionItemInterface {
+    title: string;
+    content: string;
+    open?: boolean;
+    disabled?: boolean;
+}
+declare class Accordian {
+    items: AccordionItemInterface[];
+    multiple: boolean;
+    toggle(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Accordian, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Accordian, "simple-accordian", never, { "items": { "alias": "items"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { Accordian };
+export type { AccordionItemInterface };