@govtechsg/sgds-web-component 1.2.3 → 1.3.0
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.
- package/components/Accordion/index.umd.js +9 -4
- package/components/Accordion/index.umd.js.map +1 -1
- package/components/Accordion/sgds-accordion-item.cjs2.js +1 -1
- package/components/Accordion/sgds-accordion-item2.js +1 -1
- package/components/Accordion/sgds-accordion.cjs.js +5 -1
- package/components/Accordion/sgds-accordion.cjs.js.map +1 -1
- package/components/Accordion/sgds-accordion.cjs2.js +10 -0
- package/components/Accordion/sgds-accordion.cjs2.js.map +1 -0
- package/components/Accordion/sgds-accordion.d.ts +3 -0
- package/components/Accordion/sgds-accordion.js +5 -1
- package/components/Accordion/sgds-accordion.js.map +1 -1
- package/components/Accordion/sgds-accordion2.js +6 -0
- package/components/Accordion/sgds-accordion2.js.map +1 -0
- package/components/index.umd.js +9 -4
- package/components/index.umd.js.map +1 -1
- package/index.umd.js +9 -4
- package/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var lit = require('lit');
|
|
6
6
|
|
|
7
|
-
var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
|
|
7
|
+
var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
|
|
8
8
|
|
|
9
9
|
exports["default"] = css_248z;
|
|
10
10
|
//# sourceMappingURL=sgds-accordion-item.cjs2.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
|
|
3
|
+
var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
|
|
4
4
|
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
//# sourceMappingURL=sgds-accordion-item2.js.map
|
|
@@ -7,10 +7,14 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators_js = require('lit/decorators.js');
|
|
8
8
|
var classMap_js = require('lit/directives/class-map.js');
|
|
9
9
|
var sgdsElement = require('../../base/sgds-element.cjs.js');
|
|
10
|
+
var sgdsAccordion = require('./sgds-accordion.cjs2.js');
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
|
|
13
14
|
* @slot default - slot for accordion-item
|
|
15
|
+
*
|
|
16
|
+
* @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state
|
|
17
|
+
*
|
|
14
18
|
*/
|
|
15
19
|
class SgdsAccordion extends sgdsElement["default"] {
|
|
16
20
|
constructor() {
|
|
@@ -72,7 +76,7 @@ class SgdsAccordion extends sgdsElement["default"] {
|
|
|
72
76
|
`;
|
|
73
77
|
}
|
|
74
78
|
}
|
|
75
|
-
SgdsAccordion.styles = [sgdsElement["default"].styles];
|
|
79
|
+
SgdsAccordion.styles = [sgdsElement["default"].styles, sgdsAccordion["default"]];
|
|
76
80
|
tslib.__decorate([
|
|
77
81
|
decorators_js.property({ type: Boolean, reflect: true })
|
|
78
82
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","__decorate","property","queryAssignedNodes"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAACF,sBAAW,CAAC,MAAM,EAAEG,wBAAM,CAA9B,CAAgC;AAGDC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9CD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var lit = require('lit');
|
|
6
|
+
|
|
7
|
+
var css_248z = lit.css`:host{--accordion-active-color:var(--sgds-primary)}`;
|
|
8
|
+
|
|
9
|
+
exports["default"] = css_248z;
|
|
10
|
+
//# sourceMappingURL=sgds-accordion.cjs2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sgds-accordion.cjs2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -3,6 +3,9 @@ import type SgdsAccordionItem from "./sgds-accordion-item";
|
|
|
3
3
|
/**
|
|
4
4
|
* @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
|
|
5
5
|
* @slot default - slot for accordion-item
|
|
6
|
+
*
|
|
7
|
+
* @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state
|
|
8
|
+
*
|
|
6
9
|
*/
|
|
7
10
|
export declare class SgdsAccordion extends SgdsElement {
|
|
8
11
|
static styles: import("lit").CSSResultGroup[];
|
|
@@ -3,10 +3,14 @@ import { html } from 'lit';
|
|
|
3
3
|
import { property, queryAssignedNodes } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import SgdsElement from '../../base/sgds-element.js';
|
|
6
|
+
import css_248z from './sgds-accordion2.js';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
|
|
9
10
|
* @slot default - slot for accordion-item
|
|
11
|
+
*
|
|
12
|
+
* @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state
|
|
13
|
+
*
|
|
10
14
|
*/
|
|
11
15
|
class SgdsAccordion extends SgdsElement {
|
|
12
16
|
constructor() {
|
|
@@ -68,7 +72,7 @@ class SgdsAccordion extends SgdsElement {
|
|
|
68
72
|
`;
|
|
69
73
|
}
|
|
70
74
|
}
|
|
71
|
-
SgdsAccordion.styles = [SgdsElement.styles];
|
|
75
|
+
SgdsAccordion.styles = [SgdsElement.styles, css_248z];
|
|
72
76
|
__decorate([
|
|
73
77
|
property({ type: Boolean, reflect: true })
|
|
74
78
|
], SgdsAccordion.prototype, "allowMultiple", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["styles"],"mappings":";;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAAC,WAAW,CAAC,MAAM,EAAEA,QAAM,CAA9B,CAAgC;AAGD,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9C,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sgds-accordion2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|