@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/collection/components/accordion/accordion.js

@@ -1,30 +1,28 @@
-import { h, Component, Prop, Host, Method, Watch, Element, Event } from '@stencil/core';
-import { createStore } from '@stencil/store';
+import { h, Host, } from "@stencil/core";
+import { createStore } from "@stencil/store";
 export class Accordion {
   constructor() {
-    this.variant = 'default';
-    /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+    this.variant = "default";
     this.reverseAlign = false;
-    /** Allows multiple sections to be open at the same time. */
     this.allowMultipleOpen = false;
     const { state } = createStore({
-      variant: this.variant || 'default',
+      variant: this.variant || "default",
       reverseAlign: this.reverseAlign,
     });
     this.accordionState = state;
   }
-  updateVariant(variant = 'default') {
-    this.accordionState.variant = variant || 'default';
+  updateVariant(variant = "default") {
+    this.accordionState.variant = variant || "default";
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
   watchAllowMultiple(allowMultipleOpen) {
     if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section[open]'));
+      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
       // By removing the first section, it is kept open;
       openSections.shift();
-      openSections.forEach(section => this.controlOpenAttribute(section, false));
+      openSections.forEach((section) => this.controlOpenAttribute(section, false));
     }
   }
   async getState() {
@@ -32,8 +30,8 @@ export class Accordion {
   }
   /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
   async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
-    if (typeof sectionElement === 'number') {
+    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
+    if (typeof sectionElement === "number") {
       sectionElement = sections[sectionElement];
     }
     if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
@@ -56,15 +54,14 @@ export class Accordion {
   }
   /** Closes all sections belonging to this accordion. */
   async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
-    const openSections = sections.filter(s => this.isSectionOpen(s));
-    openSections.forEach(section => this.controlOpenAttribute(section, false));
+    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
+    const openSections = sections.filter((s) => this.isSectionOpen(s));
+    openSections.forEach((section) => this.controlOpenAttribute(section, false));
   }
   render() {
     return (h(Host, { class: {
-        'dso-accordion': true
-      } },
-      h("slot", null)));
+        "dso-accordion": true,
+      } }, h("slot", null)));
   }
   emitToggleEvent(sectionElement, sections, e) {
     this.dsoToggleSection.emit({
@@ -77,184 +74,196 @@ export class Accordion {
     });
   }
   isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute('open') === 'string';
+    return typeof sectionElement.getAttribute("open") === "string";
   }
   controlOpenAttribute(sectionElement, setAttribute) {
     if (setAttribute) {
-      sectionElement.setAttribute('open', '');
+      sectionElement.setAttribute("open", "");
     }
     else {
-      sectionElement.removeAttribute('open');
+      sectionElement.removeAttribute("open");
     }
   }
   static get is() { return "dso-accordion"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["accordion.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["accordion.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "AccordionVariant",
-        "resolved": "\"compact\" | \"conclusion\" | \"default\" | undefined",
-        "references": {
-          "AccordionVariant": {
-            "location": "import",
-            "path": "./accordion.interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AccordionVariant",
+          "resolved": "\"compact\" | \"conclusion\" | \"default\" | undefined",
+          "references": {
+            "AccordionVariant": {
+              "location": "import",
+              "path": "./accordion.interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": true,
-      "defaultValue": "'default'"
-    },
-    "reverseAlign": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
-      },
-      "attribute": "reverse-align",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "allowMultipleOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allows multiple sections to be open at the same time."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
       },
-      "attribute": "allow-multiple-open",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "dsoToggleSection",
-      "name": "dsoToggleSection",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a section is toggled.\n\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\n`event.detail.section` contains the toggled section and its new opened value.\\\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
+      "reverseAlign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
+        },
+        "attribute": "reverse-align",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "AccordionSectionToggleEvent",
-        "resolved": "AccordionSectionToggleEvent",
-        "references": {
-          "AccordionSectionToggleEvent": {
-            "location": "import",
-            "path": "./accordion.interfaces"
+      "allowMultipleOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allows multiple sections to be open at the same time."
+        },
+        "attribute": "allow-multiple-open",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggleSection",
+        "name": "dsoToggleSection",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a section is toggled.\r\n\r\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n`event.detail.section` contains the toggled section and its new opened value.\\\r\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
+        },
+        "complexType": {
+          "original": "AccordionSectionToggleEvent",
+          "resolved": "AccordionSectionToggleEvent",
+          "references": {
+            "AccordionSectionToggleEvent": {
+              "location": "import",
+              "path": "./accordion.interfaces"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "getState": {
-      "complexType": {
-        "signature": "() => Promise<AccordionInternalState>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "getState": {
+        "complexType": {
+          "signature": "() => Promise<AccordionInternalState>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "AccordionInternalState": {
+              "location": "import",
+              "path": "./accordion.interfaces"
+            }
           },
-          "AccordionInternalState": {
-            "location": "import",
-            "path": "./accordion.interfaces"
-          }
+          "return": "Promise<AccordionInternalState>"
         },
-        "return": "Promise<AccordionInternalState>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "toggleSection": {
-      "complexType": {
-        "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "toggleSection": {
+        "complexType": {
+          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            }
           },
-          "HTMLElement": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
-        "tags": []
-      }
-    },
-    "closeOpenSections": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "closeOpenSections": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
           },
-          "HTMLElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Closes all sections belonging to this accordion.",
-        "tags": []
+        "docs": {
+          "text": "Closes all sections belonging to this accordion.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "variant",
-      "methodName": "updateVariant"
-    }, {
-      "propName": "reverseAlign",
-      "methodName": "updateReverseAlign"
-    }, {
-      "propName": "allowMultipleOpen",
-      "methodName": "watchAllowMultiple"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "updateVariant"
+      }, {
+        "propName": "reverseAlign",
+        "methodName": "updateReverseAlign"
+      }, {
+        "propName": "allowMultipleOpen",
+        "methodName": "watchAllowMultiple"
+      }];
+  }
 }

package/dist/collection/components/accordion/components/accordion-section.css

@@ -54,6 +54,7 @@
   line-height: 1.375em;
   margin: 0;
   padding: 12px 16px 12px;
+  text-align: start;
   width: 100%;
   word-break: break-word;
 }
@@ -111,30 +112,36 @@
   border-radius: 0 0 4px 4px;
 }
 
-:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+:host(.dso-accordion-default[open]) > .dso-section-handle {
   background-color: #8b4a6a;
-  border-radius: 4px;
+  border-radius: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
-:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
-:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
+:host(.dso-accordion-default[open]) > .dso-section-handle a,
+:host(.dso-accordion-default[open]) > .dso-section-handle button {
   color: #fff;
 }
-:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-default[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
+:host(.dso-accordion-default[open]) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-default[open]) > .dso-section-handle button dso-attachments-counter {
   --dso-attachments-counter-color: #fff;
   --dso-icon: var(--di-paperclip-wit);
 }
 
 :host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body {
-  background-color: #d1b7c4;
+  background-color: #e5e5e5;
 }
 
 :host(.dso-accordion-compact) .dso-section-handle {
   border: 1px solid transparent;
+  border-top-width: 0;
 }
 :host(.dso-accordion-compact) .dso-section-handle a,
 :host(.dso-accordion-compact) .dso-section-handle button {
   color: #39870c;
+  padding-bottom: 11px;
+  padding-left: 0;
+  padding-top: 11px;
 }
 :host(.dso-accordion-compact) .dso-section-handle a:hover, :host(.dso-accordion-compact) .dso-section-handle a:active, :host(.dso-accordion-compact) .dso-section-handle a.active,
 :host(.dso-accordion-compact) .dso-section-handle button:hover,
@@ -146,15 +153,14 @@
 :host(.dso-accordion-compact) .dso-section-body {
   border: 0;
   border-top: 1px solid #ccc;
+  padding-top: 0;
 }
 :host(.dso-accordion-compact):last-child {
   border-bottom: 1px solid #ccc;
 }
-:host(.dso-accordion-compact) + dso-accordion-section {
-  margin-top: 0;
-}
 :host(.dso-accordion-compact) .dso-section-body {
   margin-top: 0;
+  padding-bottom: 12px;
 }
 
 :host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle {
@@ -175,6 +181,9 @@
   --dso-attachments-counter-color: #666;
   --dso-icon: var(--di-paperclip-grijs);
 }
+:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-body {
+  border-top: 0;
+}
 
 :host(.dso-accordion-compact.dso-nested-accordion[open]) > .dso-section-body {
   padding-bottom: 0;
@@ -217,5 +226,4 @@
 
 :host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
   background-color: #fff;
-  border: 2px solid #f2f2f2;
 }