simple-accordian 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,6 +6,12 @@ class Accordian {
|
|
|
6
6
|
//for the inputs of the accordian component
|
|
7
7
|
items = []; // Array of accordion items
|
|
8
8
|
multiple = false; // Allow multiple sections to be open simultaneously
|
|
9
|
+
headerBg = '#f5f5f5';
|
|
10
|
+
headerActiveBg = '#e0e0e0';
|
|
11
|
+
headerTextColor = '#000';
|
|
12
|
+
bodyBg = '#fff';
|
|
13
|
+
bodyTextColor = '#333';
|
|
14
|
+
borderColor = '#ddd';
|
|
9
15
|
//function to toggle the accordian items
|
|
10
16
|
toggle(index) {
|
|
11
17
|
const clicked = this.items[index];
|
|
@@ -23,15 +29,27 @@ class Accordian {
|
|
|
23
29
|
});
|
|
24
30
|
}
|
|
25
31
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Accordian, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
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
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Accordian, isStandalone: true, selector: "simple-accordian", inputs: { items: "items", multiple: "multiple", headerBg: "headerBg", headerActiveBg: "headerActiveBg", headerTextColor: "headerTextColor", bodyBg: "bodyBg", bodyTextColor: "bodyTextColor", borderColor: "borderColor" }, ngImport: i0, template: "<div class=\"accordion\" class=\"accordion\" [style.--header-bg]=\"headerBg\" [style.--header-active-bg]=\"headerActiveBg\"\r\n [style.--header-text-color]=\"headerTextColor\" [style.--body-bg]=\"bodyBg\" [style.--body-text-color]=\"bodyTextColor\"\r\n [style.--border-color]=\"borderColor\">\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;--border-color: #e5e7eb;--header-text-color: #111827;--header-hover-bg: #f9fafb;--header-active-bg: #f3f4f6;--header-disabled-bg: #fafafa;--header-disabled-text: #9ca3af;--body-bg: #ffffff;--body-text-color: #374151}.accordion{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:var(--body-bg)}.accordion-item{border-bottom:1px solid var(--border-color)}.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:var(--header-text-color);transition:background .2s ease,color .2s ease}.accordion-header:hover{background:var(--header-hover-bg)}.accordion-header.active{background:var(--header-active-bg)}.accordion-header:disabled{cursor:not-allowed;color:var(--header-disabled-text);background:var(--header-disabled-bg)}.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:var(--body-text-color);background:var(--body-bg)}.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 }] });
|
|
27
33
|
}
|
|
28
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Accordian, decorators: [{
|
|
29
35
|
type: Component,
|
|
30
|
-
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
|
|
36
|
+
args: [{ selector: 'simple-accordian', standalone: true, imports: [CommonModule], template: "<div class=\"accordion\" class=\"accordion\" [style.--header-bg]=\"headerBg\" [style.--header-active-bg]=\"headerActiveBg\"\r\n [style.--header-text-color]=\"headerTextColor\" [style.--body-bg]=\"bodyBg\" [style.--body-text-color]=\"bodyTextColor\"\r\n [style.--border-color]=\"borderColor\">\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;--border-color: #e5e7eb;--header-text-color: #111827;--header-hover-bg: #f9fafb;--header-active-bg: #f3f4f6;--header-disabled-bg: #fafafa;--header-disabled-text: #9ca3af;--body-bg: #ffffff;--body-text-color: #374151}.accordion{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:var(--body-bg)}.accordion-item{border-bottom:1px solid var(--border-color)}.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:var(--header-text-color);transition:background .2s ease,color .2s ease}.accordion-header:hover{background:var(--header-hover-bg)}.accordion-header.active{background:var(--header-active-bg)}.accordion-header:disabled{cursor:not-allowed;color:var(--header-disabled-text);background:var(--header-disabled-bg)}.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:var(--body-text-color);background:var(--body-bg)}.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"] }]
|
|
31
37
|
}], propDecorators: { items: [{
|
|
32
38
|
type: Input
|
|
33
39
|
}], multiple: [{
|
|
34
40
|
type: Input
|
|
41
|
+
}], headerBg: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}], headerActiveBg: [{
|
|
44
|
+
type: Input
|
|
45
|
+
}], headerTextColor: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}], bodyBg: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], bodyTextColor: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], borderColor: [{
|
|
52
|
+
type: Input
|
|
35
53
|
}] } });
|
|
36
54
|
|
|
37
55
|
/*
|
|
@@ -1 +1 @@
|
|
|
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;;
|
|
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 @Input() headerBg = '#f5f5f5';\r\n @Input() headerActiveBg = '#e0e0e0';\r\n @Input() headerTextColor = '#000';\r\n @Input() bodyBg = '#fff';\r\n @Input() bodyTextColor = '#333';\r\n @Input() borderColor = '#ddd';\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\" class=\"accordion\" [style.--header-bg]=\"headerBg\" [style.--header-active-bg]=\"headerActiveBg\"\r\n [style.--header-text-color]=\"headerTextColor\" [style.--body-bg]=\"bodyBg\" [style.--body-text-color]=\"bodyTextColor\"\r\n [style.--border-color]=\"borderColor\">\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;IACjB,QAAQ,GAAG,SAAS;IACpB,cAAc,GAAG,SAAS;IAC1B,eAAe,GAAG,MAAM;IACxB,MAAM,GAAG,MAAM;IACf,aAAa,GAAG,MAAM;IACtB,WAAW,GAAG,MAAM;;AAG7B,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;uGA5BW,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,QAAA,EAAA,UAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,aAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjBtB,k5BAuBA,EAAA,MAAA,EAAA,CAAA,0nDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDVY,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,k5BAAA,EAAA,MAAA,EAAA,CAAA,0nDAAA,CAAA,EAAA;;sBAOtB;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;;AE3BH;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -9,9 +9,15 @@ interface AccordionItemInterface {
|
|
|
9
9
|
declare class Accordian {
|
|
10
10
|
items: AccordionItemInterface[];
|
|
11
11
|
multiple: boolean;
|
|
12
|
+
headerBg: string;
|
|
13
|
+
headerActiveBg: string;
|
|
14
|
+
headerTextColor: string;
|
|
15
|
+
bodyBg: string;
|
|
16
|
+
bodyTextColor: string;
|
|
17
|
+
borderColor: string;
|
|
12
18
|
toggle(index: number): void;
|
|
13
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<Accordian, never>;
|
|
14
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<Accordian, "simple-accordian", never, { "items": { "alias": "items"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, true, never>;
|
|
20
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<Accordian, "simple-accordian", never, { "items": { "alias": "items"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "headerBg": { "alias": "headerBg"; "required": false; }; "headerActiveBg": { "alias": "headerActiveBg"; "required": false; }; "headerTextColor": { "alias": "headerTextColor"; "required": false; }; "bodyBg": { "alias": "bodyBg"; "required": false; }; "bodyTextColor": { "alias": "bodyTextColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, {}, never, never, true, never>;
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
export { Accordian };
|