@descope-ui/descope-collapsible-container 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.8](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-collapsible-container-0.0.7...@descope-ui/descope-collapsible-container-0.0.8) (2025-06-03)
+
+### Dependency Updates
+
+* `@descope-ui/descope-icon` updated to version `0.0.8`
+## [0.0.7](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-collapsible-container-0.0.6...@descope-ui/descope-collapsible-container-0.0.7) (2025-05-28)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.12`
+* `@descope-ui/theme-globals` updated to version `0.0.12`
+* `@descope-ui/descope-text` updated to version `0.0.12`
+* `@descope-ui/descope-icon` updated to version `0.0.7`
 ## [0.0.6](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-collapsible-container-0.0.5...@descope-ui/descope-collapsible-container-0.0.6) (2025-04-29)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-collapsible-container",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -18,10 +18,10 @@
     "test-drivers": "0.0.1"
   },
   "dependencies": {
-    "@descope-ui/common": "0.0.11",
-    "@descope-ui/theme-globals": "0.0.11",
-    "@descope-ui/descope-text": "0.0.11",
-    "@descope-ui/descope-icon": "0.0.6"
+    "@descope-ui/common": "0.0.12",
+    "@descope-ui/theme-globals": "0.0.12",
+    "@descope-ui/descope-text": "0.0.12",
+    "@descope-ui/descope-icon": "0.0.8"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/CollapsibleContainerClass.js

@@ -1,17 +1,24 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
 import { createBaseClass } from '@descope-ui/common/base-classes';
 import { compose } from '@descope-ui/common/utils';
 import {
   forwardAttrs,
   getComponentName,
-  injectStyle
+  injectStyle,
 } from '@descope-ui/common/components-helpers';
 import chevronIcon from './chevron.svg';
 import { TextClass } from '@descope-ui/descope-text/class';
 
 export const componentName = getComponentName('collapsible-container');
 
-class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {
+class RawCollapsibleContainer extends createBaseClass({
+  componentName,
+  baseSelector: 'slot',
+}) {
   static get observedAttributes() {
     return ['collapsed', 'collapsible', 'text'];
   }
@@ -23,7 +30,9 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
     <div class="wrapper">
       <descope-text st-host-direction="ltr">
         <div class="header">
-          <descope-icon st-align-items="center" st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          <div class="icon">
+            <descope-icon st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          </div>
           <span></span>
         </div>
       </descope-text>
@@ -38,7 +47,6 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
       div.content {
         transition-property: max-height;
         overflow: auto;
-        transition-property: max-height;
         height: auto;
 			}
 			slot {
@@ -57,11 +65,15 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
           display: flex;
           align-items: baseline;
       }
-      descope-icon {
-          transition-property: transform;
+      .icon {
           flex-shrink: 0;
           height: var(${TextClass.cssVarList.textLineHeight});
           min-height: 24px;
+          display: flex;
+          align-items: center;
+      }
+      descope-icon {
+          transition-property: transform;
       }
       .rotate {
           transform: rotate(-180deg);
@@ -84,18 +96,18 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
         flex-direction: column;
       }
   `,
-      this
+      this,
     );
 
     this.header = this.shadowRoot.querySelector('.header');
     this.content = this.shadowRoot.querySelector('div.content');
-    this.icon = this.header.querySelector('descope-icon')
+    this.icon = this.header.querySelector('descope-icon');
     this.headerText = this.header.querySelector('span');
     this.textComponent = this.shadowRoot.querySelector('descope-text');
   }
 
   get isCollapsible() {
-    return this.getAttribute('collapsible') === 'true'
+    return this.getAttribute('collapsible') === 'true';
   }
 
   calcContentHeight() {
@@ -112,8 +124,8 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
 
   collapse(animated = false) {
     const final = () => {
-      this.content.style.maxHeight = '0px'
-    }
+      this.content.style.maxHeight = '0px';
+    };
     this.icon.classList.add('rotate');
     if (!animated) return final();
 
@@ -124,7 +136,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
   expand(animated = false) {
     const final = () => {
       this.content.style.maxHeight = '';
-    }
+    };
     this.icon.classList.remove('rotate');
     if (!animated) return final();
 
@@ -142,11 +154,11 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
 
     this.header.addEventListener('click', () => {
       if (!this.isCollapsible) return;
-      this.toggle()
+      this.toggle();
     });
     forwardAttrs(this, this.textComponent, {
       includeAttrs: ['text-align', 'text-variant', 'text-mode'],
-      mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' }
+      mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' },
     });
   }
 
@@ -158,7 +170,7 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'text') {
       this.updateHeaderText();
-      return
+      return;
     }
     const collapsed = this.isCollapsed && this.isCollapsible;
     if (collapsed) {
@@ -172,19 +184,26 @@ class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelec
 const selectors = {
   host: () => ':host',
   icon: () => 'descope-icon',
+  iconWrapper: () => '.icon',
   header: () => '.header',
   text: () => 'span',
   wrapper: () => '.wrapper',
   content: () => 'div.content',
-}
+};
 
 export const CollapsibleContainerClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: selectors.host, property: 'width' },
       hostDirection: { selector: selectors.host, property: 'direction' },
-      verticalPadding: [{ selector: selectors.wrapper, property: 'padding-top' }, { selector: selectors.wrapper, property: 'padding-bottom' }],
-      horizontalPadding: [{ selector: selectors.wrapper, property: 'padding-left' }, { selector: selectors.wrapper, property: 'padding-right' }],
+      verticalPadding: [
+        { selector: selectors.wrapper, property: 'padding-top' },
+        { selector: selectors.wrapper, property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { selector: selectors.wrapper, property: 'padding-left' },
+        { selector: selectors.wrapper, property: 'padding-right' },
+      ],
 
       flexDirection: {},
       justifyContent: {},
@@ -205,15 +224,21 @@ export const CollapsibleContainerClass = compose(
 
       boxShadow: { selector: selectors.wrapper },
 
-      headerIconOrder: { selector: selectors.icon, property: 'order' },
+      headerIconOrder: { selector: selectors.iconWrapper, property: 'order' },
       headerCursor: { selector: selectors.header, property: 'cursor' },
       headerGap: { selector: selectors.header, property: 'gap' },
       textGrow: { selector: selectors.text, property: 'flex-grow' },
       textDirection: { selector: selectors.text, property: 'direction' },
-      iconAnimationDuration: { selector: selectors.icon, property: 'transition-duration' },
-      contentAnimationDuration: { selector: selectors.content, property: 'transition-duration' },
+      iconAnimationDuration: {
+        selector: selectors.icon,
+        property: 'transition-duration',
+      },
+      contentAnimationDuration: {
+        selector: selectors.content,
+        property: 'transition-duration',
+      },
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
 )(RawCollapsibleContainer);