@fluid-topics/ft-tree-selector 1.2.42 → 1.2.44

package/build/ft-tree-selector.styles.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
 import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtButtonCssVariables, FtButtonDenseCssVariables } from "@fluid-topics/ft-button";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
 import { FtTypographyCssVariables } from "@fluid-topics/ft-typography";
 export const FtTreeSelectorCssVariables = {
     expandButtonColor: FtCssVariableFactory.extend("--ft-tree-selector-expand-button-color", "Color of the expand button", designSystemVariables.colorOnSurfaceMedium),
@@ -54,33 +54,26 @@ export const styles = css `
         position: relative;
     }
 
-    [part="level"] [part="children"] {
-        padding-left: calc((${FtButtonCssVariables.iconSize} / 2))
+    [part="level"] > [part="children"] {
+        padding-left: 14px; /* Align vertical line with the tip of the expand arrow */
     }
 
     [part="children"] [part="children"] {
-        padding-left: calc((${FtButtonCssVariables.iconSize} / 2) + ${FtTreeSelectorCssVariables.levelPadding})
+        padding-left: calc(14px + ${FtTreeSelectorCssVariables.levelPadding})
     }
 
-    [part="children"] [part="level"] [part="actions"] {
+    [part="children"] > [part="level"] > [part="actions"] {
         padding-left: ${FtTreeSelectorCssVariables.levelPadding}
     }
 
-    /* Padding for when the leaf is brother of an expandable.*/
-    [part="children"].with-expandable > [part="level"].leaf [part="actions"] {
-        padding-left: calc(${FtButtonCssVariables.iconSize} + ${FtButtonDenseCssVariables.horizontalPadding} + ${FtTreeSelectorCssVariables.levelPadding});
-    }
-
-    /* Padding for when the leaf is brother of an expandable and at first level.*/
-    .ft-tree-selector.with-expandable > [part="level"].leaf [part="actions"] {
-        padding-left: calc(${FtButtonCssVariables.iconSize} + ${FtButtonDenseCssVariables.horizontalPadding});
-    }
-
-    .expandable [part="level"].leaf [part="actions"] {
-        padding-left: calc(${FtTreeSelectorCssVariables.levelPadding} + ${FtButtonCssVariables.iconSize});
+    .with-expandable [part="expand"] {
+        width: 28px;
     }
 
     [part="expand"] {
+        ${setVariable(FtButtonCssVariables.iconSize, "24px")};
+        ${setVariable(FtButtonCssVariables.horizontalPadding, "4px")};
+        display: block;
         ${setVariable(FtButtonCssVariables.color, FtTreeSelectorCssVariables.expandButtonColor)};
         ${setVariable(FtButtonCssVariables.backgroundColor, FtTreeSelectorCssVariables.expandButtonBackgroundColor)};
         flex-shrink: 0;
@@ -96,9 +89,9 @@ export const styles = css `
         position: relative;
     }
 
-    [part="children"] [part="level"] [part="actions"]:before,
-    [part="children"] [part="level"]:after,
-    [part="children"] [part="level"]:last-child [part="actions"]:after {
+    [part="children"] > [part="level"] > [part="actions"]:before,
+    [part="children"] > [part="level"]:after,
+    [part="children"] > [part="level"]:last-child > [part="actions"]:after {
         position: absolute;
         content: "";
         left: 0;
@@ -108,19 +101,19 @@ export const styles = css `
     /* Vertical lines */
 
     /* For all level except the last one, the vertical line is on the left of all the "[part="level"]" container to auto-scale with the content*/
-    [part="children"] [part="level"]:after {
+    [part="children"] > [part="level"]:after {
         border-left: 1px solid ${FtTreeSelectorCssVariables.treeLinesColor};
         height: 100%;
         top: 0;
     }
 
-    [part="children"] [part="level"]:last-child:after {
+    [part="children"] > [part="level"]:last-child:after {
         border: none;
     }
 
     /* For the last level of a tree, the line should stop at the middle of the parent node. So we need to move it to "actions". Moving it allow the label
     to be longer than one line and the tree line to remain aline */
-    [part="children"] [part="level"]:last-child [part="actions"]:after {
+    [part="children"] > [part="level"]:last-child > [part="actions"]:after {
         border-left: 1px solid ${FtTreeSelectorCssVariables.treeLinesColor};
         height: 50%;
         bottom: 50%;
@@ -130,16 +123,16 @@ export const styles = css `
     /* Horizontal lines */
 
     /*The actions support the horizontal line, this allow the label to be longer than one line and the tree lien to remain aline */
-    [part="children"] [part="level"] [part="actions"]:before {
+    [part="children"] > [part="level"] > [part="actions"]:before {
         border-top: 1px solid ${FtTreeSelectorCssVariables.treeLinesColor};
-        width: ${FtTreeSelectorCssVariables.levelPadding};
+        width: calc(${FtTreeSelectorCssVariables.levelPadding} - 2px);
         height: 100%;
         top: 50%;
     }
 
-    [part="children"] [part="level"].leaf [part="actions"]:before {
+    [part="children"] > [part="level"].leaf > [part="actions"]:before {
         border-top: 1px solid ${FtTreeSelectorCssVariables.treeLinesColor};
-        width: 42px;
+        width: calc(${FtTreeSelectorCssVariables.levelPadding} + 26px);
         height: 100%;
         top: 50%
     }

package/build/model/FtTree.d.ts

@@ -13,7 +13,3 @@ export interface FtTreeChangedDetail {
     value: string;
     selected: boolean;
 }
-export interface FtTreeExpandedChangeDetail {
-    value: string;
-    expanded: boolean;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-tree-selector",
-    "version": "1.2.42",
+    "version": "1.2.44",
     "description": "A hierarchical selector for tree\n",
     "keywords": [
         "Lit"
@@ -19,11 +19,11 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-wc-utils": "1.2.42",
+        "@fluid-topics/ft-wc-utils": "1.2.44",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.2.42"
+        "@fluid-topics/ft-wc-test-utils": "1.2.44"
     },
-    "gitHead": "072e48eee7ad88adbaf13ada77bcda7fdd2baab4"
+    "gitHead": "9cbc1788339e7a5d3d4dc94c36ec5a28f31dba6c"
 }