@nuralyui/collapse 0.0.1

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.
@@ -0,0 +1,8 @@
1
+ import { LitElement } from 'lit';
2
+ import '../hy-collapse.component';
3
+ import '../../icon/icon.component';
4
+ import '../../select/demo/select-demo';
5
+ export declare class HyCollapseDemo extends LitElement {
6
+ render(): import("lit").TemplateResult<1>;
7
+ }
8
+ //# sourceMappingURL=hy-collapse-demo.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/collapse/demo/hy-collapse-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,qBACa,cAAe,SAAQ,UAAU;IACnC,MAAM;CAqChB"}
@@ -0,0 +1,55 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html } from 'lit';
8
+ import { customElement } from 'lit/decorators.js';
9
+ import '../hy-collapse.component';
10
+ import '../../icon/icon.component';
11
+ import '../../select/demo/select-demo';
12
+ let HyCollapseDemo = class HyCollapseDemo extends LitElement {
13
+ render() {
14
+ return html `
15
+ Default size
16
+ <hy-collapse
17
+ .sections=${[
18
+ {
19
+ header: 'Section 1',
20
+ content: html ` <hy-select-demo></hy-select-demo> `,
21
+ open: false,
22
+ },
23
+ { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
24
+ { header: 'Section 3', content: 'Content for section 3', open: false },
25
+ { header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true },
26
+ ]}
27
+ ></hy-collapse>
28
+
29
+ Small size
30
+ <hy-collapse
31
+ .size=${'small'}
32
+ .sections=${[
33
+ { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
34
+ { header: 'Section 3', content: 'Content for section 3', open: false },
35
+ { header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true },
36
+ ]}
37
+ ></hy-collapse>
38
+
39
+ Large size
40
+ <hy-collapse
41
+ .size=${'large'}
42
+ .sections=${[
43
+ { header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false },
44
+ { header: 'Section 3', content: 'Content for section 3', open: false },
45
+ { header: 'Section 4', content: 'Content for section 4', collapsible: true },
46
+ ]}
47
+ ></hy-collapse>
48
+ `;
49
+ }
50
+ };
51
+ HyCollapseDemo = __decorate([
52
+ customElement('hy-collapse-demo')
53
+ ], HyCollapseDemo);
54
+ export { HyCollapseDemo };
55
+ //# sourceMappingURL=hy-collapse-demo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse-demo.js","sourceRoot":"","sources":["../../../../src/components/collapse/demo/hy-collapse-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAEvC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IACnC,MAAM;QACb,OAAO,IAAI,CAAA;;;oBAGK;YACV;gBACE,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,IAAI,CAAA,qCAAqC;gBAClD,IAAI,EAAE,KAAK;aACZ;YACD,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC;SACvF;;;;;gBAKO,OAAO;oBACH;YACV,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC;SACvF;;;;;gBAKO,OAAO;oBACH;YACV,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC;YACvF,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,IAAI,EAAE,KAAK,EAAC;YACpE,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,IAAI,EAAC;SAC3E;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtCY,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsC1B;SAtCY,cAAc","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../hy-collapse.component';\nimport '../../icon/icon.component';\nimport '../../select/demo/select-demo';\n@customElement('hy-collapse-demo')\nexport class HyCollapseDemo extends LitElement {\n override render() {\n return html`\n Default size\n <hy-collapse\n .sections=${[\n {\n header: 'Section 1',\n content: html` <hy-select-demo></hy-select-demo> `,\n open: false,\n },\n {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n {header: 'Section 3', content: 'Content for section 3', open: false},\n {header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true},\n ]}\n ></hy-collapse>\n\n Small size\n <hy-collapse\n .size=${'small'}\n .sections=${[\n {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n {header: 'Section 3', content: 'Content for section 3', open: false},\n {header: 'Section 4', content: 'Content for section 4', open: true, collapsible: true},\n ]}\n ></hy-collapse>\n\n Large size\n <hy-collapse\n .size=${'large'}\n .sections=${[\n {header: 'Section 2', content: 'Content for section 2', open: true, collapsible: false},\n {header: 'Section 3', content: 'Content for section 3', open: false},\n {header: 'Section 4', content: 'Content for section 4', collapsible: true},\n ]}\n ></hy-collapse>\n `;\n }\n}\n"]}
@@ -0,0 +1,10 @@
1
+ import { LitElement } from 'lit';
2
+ import { CollapseSize, ISection } from './hy-collapse.type.js';
3
+ export declare class HyCollapse extends LitElement {
4
+ static styles: import("lit").CSSResult;
5
+ sections: ISection[];
6
+ size: CollapseSize;
7
+ toggleSection(index: number): void;
8
+ render(): import("lit").TemplateResult<1>;
9
+ }
10
+ //# sourceMappingURL=hy-collapse.component.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.component.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,YAAY,EAAE,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAI7D,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEP,QAAQ,EAAE,QAAQ,EAAE,CAAM;IACvC,IAAI,eAAwB;IAExC,aAAa,CAAC,KAAK,EAAE,MAAM;IAOlB,MAAM;CAqChB"}
@@ -0,0 +1,70 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html } from 'lit';
8
+ import { styles } from './hy-collapse.style.js';
9
+ import { customElement, property } from 'lit/decorators.js';
10
+ import { map } from 'lit/directives/map.js';
11
+ import { classMap } from 'lit/directives/class-map.js';
12
+ let HyCollapse = class HyCollapse extends LitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.sections = [];
16
+ this.size = "default" /* CollapseSize.Default */;
17
+ }
18
+ toggleSection(index) {
19
+ const section = this.sections[index];
20
+ if (section.collapsible != false) {
21
+ this.sections = this.sections.map((section, i) => (i === index ? Object.assign(Object.assign({}, section), { open: !section.open }) : section));
22
+ }
23
+ }
24
+ render() {
25
+ return html `
26
+ ${map(this.sections, (section, index) => html `
27
+ <div
28
+ class="
29
+ collapse-section
30
+ ${classMap({
31
+ 'collapse-small': this.size == "small" /* CollapseSize.Small */,
32
+ 'collapse-large': this.size == "large" /* CollapseSize.Large */,
33
+ })}
34
+ "
35
+ >
36
+ <div
37
+ class="
38
+ header
39
+ ${classMap({
40
+ 'disabled-header': section.collapsible == false,
41
+ 'collapsed-header': section.open == true,
42
+ 'fold-header': section.open != true
43
+ })}
44
+ "
45
+ @click="${() => this.toggleSection(index)}"
46
+ >
47
+ ${html `<hy-icon
48
+ class="collapse-icon"
49
+ name="${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}"
50
+ ></hy-icon>`}
51
+ ${section.header}
52
+ </div>
53
+ ${section.open && section.collapsible != false ? html `<div class="content">${section.content}</div>` : ''}
54
+ </div>
55
+ `)}
56
+ `;
57
+ }
58
+ };
59
+ HyCollapse.styles = styles;
60
+ __decorate([
61
+ property({ type: Array })
62
+ ], HyCollapse.prototype, "sections", void 0);
63
+ __decorate([
64
+ property()
65
+ ], HyCollapse.prototype, "size", void 0);
66
+ HyCollapse = __decorate([
67
+ customElement('hy-collapse')
68
+ ], HyCollapse);
69
+ export { HyCollapse };
70
+ //# sourceMappingURL=hy-collapse.component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.component.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAG2B,aAAQ,GAAe,EAAE,CAAC;QACvC,SAAI,wCAAwB;IA8C1C,CAAC;IA5CC,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iCAAK,OAAO,KAAE,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,IAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,GAAG,CACH,IAAI,CAAC,QAAQ,EACb,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;YAIpB,QAAQ,CAAC;YACP,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;YACjD,gBAAgB,EAAE,IAAI,CAAC,IAAI,oCAAsB;SAClD,CAAC;;;;;;gBAME,QAAQ,CAAC;YACT,iBAAiB,EAAE,OAAO,CAAC,WAAW,IAAI,KAAK;YAC/C,kBAAkB,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;YACxC,aAAa,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI;SACpC,CAAC;;wBAEQ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;;gBAEvC,IAAI,CAAA;;wBAEI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe;0BAC7E;gBACV,OAAO,CAAC,MAAM;;cAEhB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;SAE5G,CACF;KACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjDiB,iBAAM,GAAG,MAAO,CAAA;AAEP;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;4CAA2B;AACvC;IAAX,QAAQ,EAAE;wCAA6B;AAJ7B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkDtB;SAlDY,UAAU","sourcesContent":["import {LitElement, html} from 'lit';\nimport {styles} from './hy-collapse.style.js';\nimport {customElement, property} from 'lit/decorators.js';\nimport {CollapseSize, ISection} from './hy-collapse.type.js';\nimport {map} from 'lit/directives/map.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n@customElement('hy-collapse')\nexport class HyCollapse extends LitElement {\n static override styles = styles;\n\n @property({type: Array}) sections: ISection[] = [];\n @property() size = CollapseSize.Default;\n\n toggleSection(index: number) {\n const section = this.sections[index];\n if (section.collapsible != false) {\n this.sections = this.sections.map((section, i) => (i === index ? {...section, open: !section.open} : section));\n }\n }\n\n override render() {\n return html`\n ${map(\n this.sections,\n (section, index) => html`\n <div\n class=\"\n collapse-section \n ${classMap({\n 'collapse-small': this.size == CollapseSize.Small,\n 'collapse-large': this.size == CollapseSize.Large,\n })}\n \"\n >\n <div\n class=\" \n header\n ${classMap({\n 'disabled-header': section.collapsible == false,\n 'collapsed-header': section.open == true,\n 'fold-header': section.open != true\n })}\n \"\n @click=\"${() => this.toggleSection(index)}\"\n >\n ${html`<hy-icon\n class=\"collapse-icon\"\n name=\"${section.open && section.collapsible != false ? 'chevron-down' : 'chevron-right'}\"\n ></hy-icon>`}\n ${section.header}\n </div>\n ${section.open && section.collapsible != false ? html`<div class=\"content\">${section.content}</div>` : ''}\n </div>\n `\n )}\n `;\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=hy-collapse.style.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.style.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AA2GA,eAAO,MAAM,MAAM,yBAAiB,CAAC"}
@@ -0,0 +1,108 @@
1
+ import { css } from 'lit';
2
+ const collapseStyles = css `
3
+ .disabled-header {
4
+ opacity: 0.5;
5
+ cursor: not-allowed;
6
+ }
7
+ .collapse-section {
8
+ display:block;
9
+ margin-top:1px;
10
+ width:var(--hy-collapse-width,var(--hy-collapse-local-width));
11
+ border: var(--hy-collapse-border,var(--hy-collapse-local-border));
12
+ border-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
13
+ }
14
+
15
+ .collapse-icon {
16
+ display: flex;
17
+ }
18
+
19
+ .header {
20
+ border-top-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
21
+ border-top-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 5px;
25
+ padding: var(--hy-collapse-header-default-size-padding-y,var(--hy-collapse-local-header-default-size-padding-y)) var(--hy-collapse-header-default-size-padding-x,var(--hy-collapse-local-header-default-size-padding-x));
26
+ background-color: var(--hy-collapse-header-background-color,var(--hy-collapse-local-header-background-color));
27
+ font-weight: var(--hy-collapse-header-font-weight,var(--hy-collapse-local-header-font-weight));
28
+ font-size:var(--hy-collapse-header-font-size,var(--hy-collapse-local-header-font-size));
29
+ color: var(--hy-collapse-header-color,var(--hy-collapse-local-header-color));
30
+ }
31
+
32
+ .collapse-small > .header {
33
+ padding: var(--hy-collapse-header-small-size-padding-y,var(--hy-collapse-local-header-small-size-padding-y)) var(--hy-collapse-header-small-size-padding-x,var(--hy-collapse-local-header-small-size-padding-x));
34
+ }
35
+
36
+ .collapse-small > .content {
37
+ padding: var(--hy-collapse-content-small-size-padding,var(--hy-collapse-local-content-small-size-padding));
38
+ }
39
+
40
+ .collapse-large > .header {
41
+ padding: var(--hy-collapse-header-large-size-padding-y,var(--hy-collapse-local-header-large-size-padding-y)) var(--hy-collapse-header-large-size-padding-x,var(--hy-collapse-local-header-large-size-padding-x));
42
+ }
43
+
44
+ .collapse-large > .content {
45
+ padding: var(--hy-collapse-content-large-size-padding,var(--hy-collapse-local-content-large-size-padding));
46
+ }
47
+
48
+ .header:not(.disabled-header) {
49
+ cursor: pointer;
50
+ }
51
+ .header:not(.disabled-header):hover {
52
+ background-color: var(--hy-collapse-header-hover-background-color,var(--hy-collapse-local-header-hover-background-color));
53
+ }
54
+ .collapsed-header {
55
+ background-color: var(--hy-collapse-header-collapsed-background-color,var(--hy-collapse-local-header-collapsed-background-color));
56
+ }
57
+ .fold-header {
58
+ border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
59
+ border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
60
+ }
61
+
62
+ .content {
63
+ padding: var(--hy-collapse-content-default-size-padding,var(--hy-collapse-local-content-default-size-padding));
64
+ background-color: var(--hy-collapse-content-background-color,var(--hy-collapse-local-content-background-color));
65
+ color: var(--hy-collapse-content-color,var(--hy-collapse-local-content-color));
66
+ border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
67
+ border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));
68
+ }
69
+ :host {
70
+ --hy-collapse-local-content-background-color: #ffffff;
71
+ --hy-collapse-local-header-background-color: #fafafa;
72
+ --hy-collapse-local-content-color: #000000;
73
+ --hy-collapse-local-header-color: #000000;
74
+ --hy-collapse-local-header-collapsed-background-color: #d3d3d3;
75
+ --hy-collapse-local-header-hover-background-color: #e0e0e0;
76
+ --hy-collapse-local-border: 1px solid #bfbfbf;
77
+ --hy-collapse-local-font-weight: bold;
78
+ --hy-collapse-local-header-font-size: 14px;
79
+
80
+ --hy-collapse-local-width:auto;
81
+ --hy-collapse-local-border-radius:5px;
82
+
83
+ --hy-collapse-local-header-default-size-padding-y: 9px;
84
+ --hy-collapse-local-header-default-size-padding-x: 15px;
85
+ --hy-collapse-local-content-default-size-padding: 15px;
86
+
87
+ --hy-collapse-local-header-small-size-padding-y: 5px;
88
+ --hy-collapse-local-header-small-size-padding-x: 11px;
89
+ --hy-collapse-local-content-small-size-padding: 11px;
90
+
91
+ --hy-collapse-local-header-large-size-padding-y: 13px;
92
+ --hy-collapse-local-header-large-size-padding-x: 19px;
93
+ --hy-collapse-local-content-large-size-padding: 19px;
94
+ }
95
+ @media (prefers-color-scheme: dark) {
96
+ :host {
97
+ --hy-collapse-local-content-background-color: #1f1f1f;
98
+ --hy-collapse-local-header-background-color: #2a2a2a;
99
+ --hy-collapse-local-header-color: #ffffff;
100
+ --hy-collapse-local-content-color: #ffffff;
101
+ --hy-collapse-local-header-collapsed-background-color: #4a4a4a;
102
+ --hy-collapse-local-header-hover-background-color: #505050;
103
+ --hy-collapse-local-border: 1px solid #d9d9d9;
104
+ }
105
+ }
106
+ `;
107
+ export const styles = collapseStyles;
108
+ //# sourceMappingURL=hy-collapse.style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.style.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC","sourcesContent":["import {css} from 'lit';\nconst collapseStyles = css`\n .disabled-header {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .collapse-section {\n display:block;\n margin-top:1px;\n width:var(--hy-collapse-width,var(--hy-collapse-local-width));\n border: var(--hy-collapse-border,var(--hy-collapse-local-border));\n border-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n\n .collapse-icon {\n display: flex;\n }\n\n .header {\n border-top-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-top-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n display: flex;\n align-items: center;\n gap: 5px;\n padding: var(--hy-collapse-header-default-size-padding-y,var(--hy-collapse-local-header-default-size-padding-y)) var(--hy-collapse-header-default-size-padding-x,var(--hy-collapse-local-header-default-size-padding-x));\n background-color: var(--hy-collapse-header-background-color,var(--hy-collapse-local-header-background-color));\n font-weight: var(--hy-collapse-header-font-weight,var(--hy-collapse-local-header-font-weight));\n font-size:var(--hy-collapse-header-font-size,var(--hy-collapse-local-header-font-size));\n color: var(--hy-collapse-header-color,var(--hy-collapse-local-header-color));\n }\n\n .collapse-small > .header {\n padding: var(--hy-collapse-header-small-size-padding-y,var(--hy-collapse-local-header-small-size-padding-y)) var(--hy-collapse-header-small-size-padding-x,var(--hy-collapse-local-header-small-size-padding-x));\n }\n\n .collapse-small > .content {\n padding: var(--hy-collapse-content-small-size-padding,var(--hy-collapse-local-content-small-size-padding));\n }\n\n .collapse-large > .header {\n padding: var(--hy-collapse-header-large-size-padding-y,var(--hy-collapse-local-header-large-size-padding-y)) var(--hy-collapse-header-large-size-padding-x,var(--hy-collapse-local-header-large-size-padding-x));\n }\n\n .collapse-large > .content {\n padding: var(--hy-collapse-content-large-size-padding,var(--hy-collapse-local-content-large-size-padding));\n }\n\n .header:not(.disabled-header) {\n cursor: pointer;\n }\n .header:not(.disabled-header):hover {\n background-color: var(--hy-collapse-header-hover-background-color,var(--hy-collapse-local-header-hover-background-color));\n }\n .collapsed-header {\n background-color: var(--hy-collapse-header-collapsed-background-color,var(--hy-collapse-local-header-collapsed-background-color));\n }\n .fold-header {\n border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n\n .content {\n padding: var(--hy-collapse-content-default-size-padding,var(--hy-collapse-local-content-default-size-padding));\n background-color: var(--hy-collapse-content-background-color,var(--hy-collapse-local-content-background-color));\n color: var(--hy-collapse-content-color,var(--hy-collapse-local-content-color));\n border-bottom-left-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n border-bottom-right-radius:var(--hy-collapse-border-radius,var(--hy-collapse-local-border-radius));\n }\n :host {\n --hy-collapse-local-content-background-color: #ffffff;\n --hy-collapse-local-header-background-color: #fafafa;\n --hy-collapse-local-content-color: #000000;\n --hy-collapse-local-header-color: #000000;\n --hy-collapse-local-header-collapsed-background-color: #d3d3d3;\n --hy-collapse-local-header-hover-background-color: #e0e0e0;\n --hy-collapse-local-border: 1px solid #bfbfbf;\n --hy-collapse-local-font-weight: bold;\n --hy-collapse-local-header-font-size: 14px;\n\n --hy-collapse-local-width:auto;\n --hy-collapse-local-border-radius:5px;\n \n --hy-collapse-local-header-default-size-padding-y: 9px;\n --hy-collapse-local-header-default-size-padding-x: 15px;\n --hy-collapse-local-content-default-size-padding: 15px;\n\n --hy-collapse-local-header-small-size-padding-y: 5px;\n --hy-collapse-local-header-small-size-padding-x: 11px;\n --hy-collapse-local-content-small-size-padding: 11px;\n\n --hy-collapse-local-header-large-size-padding-y: 13px;\n --hy-collapse-local-header-large-size-padding-x: 19px;\n --hy-collapse-local-content-large-size-padding: 19px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hy-collapse-local-content-background-color: #1f1f1f;\n --hy-collapse-local-header-background-color: #2a2a2a;\n --hy-collapse-local-header-color: #ffffff;\n --hy-collapse-local-content-color: #ffffff;\n --hy-collapse-local-header-collapsed-background-color: #4a4a4a;\n --hy-collapse-local-header-hover-background-color: #505050;\n --hy-collapse-local-border: 1px solid #d9d9d9;\n }\n }\n`;\n\nexport const styles = collapseStyles;\n"]}
@@ -0,0 +1,12 @@
1
+ export interface ISection {
2
+ header: string;
3
+ content: string;
4
+ open?: boolean;
5
+ collapsible?: boolean;
6
+ }
7
+ export declare const enum CollapseSize {
8
+ Small = "small",
9
+ Default = "default",
10
+ Large = "large"
11
+ }
12
+ //# sourceMappingURL=hy-collapse.type.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.type.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AACD,0BAAkB,YAAY;IAC5B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=hy-collapse.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hy-collapse.type.js","sourceRoot":"","sources":["../../../src/components/collapse/hy-collapse.type.ts"],"names":[],"mappings":"","sourcesContent":["export interface ISection {\n header: string;\n content: string;\n open?: boolean;\n collapsible?: boolean;\n}\nexport const enum CollapseSize {\n Small = 'small',\n Default = 'default',\n Large = 'large',\n}\n"]}
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './hy-collapse.component.js';
2
+ //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
package/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './hy-collapse.component.js';
2
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './hy-collapse.component.js';\n"]}
package/package.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "@nuralyui/collapse",
3
+ "version": "0.0.1",
4
+ "description": "",
5
+ "main": "index.js",
6
+ "type": "module",
7
+ "scripts": {
8
+ "test": "echo \"Error: no test specified\" && exit 1"
9
+ },
10
+ "author": "Labidi Aymen",
11
+ "license": "ISC"
12
+ }