@salesforcedevs/dx-components 0.49.2-tree-loading-3 → 0.49.2-tree-loading-4

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/codeBlock/codeBlock.ts +2 -1
  3. package/src/modules/dx/filterMenu/filterMenu.css +11 -3
  4. package/src/modules/dx/filterMenu/filterMenu.html +85 -96
  5. package/src/modules/dx/treeTile/treeTile.ts +1 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "0.49.2-tree-loading-3",
3
+ "version": "0.49.2-tree-loading-4",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/codeBlock/codeBlock.ts CHANGED
@@ -42,7 +42,8 @@ export default class CodeBlock extends LightningElement {
42
42
  { label: "Html", id: "html" },
43
43
  { label: "xml", id: "xml" },
44
44
  { label: "TypeScript", id: "typescript" },
45
- { label: "PHP", id: "php" }
45
+ { label: "PHP", id: "php" },
46
+ { label: "JSON", id: "json" }
46
47
  ];
47
48
 
48
49
  connectedCallback() {
package/src/modules/dx/filterMenu/filterMenu.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --dx-c-filter-menu-margin: 0;
5
5
  --dx-c-checkbox-font-size: 13px;
6
6
  --dx-g-text-body-color: var(--sds-g-gray-11);
7
+ --horizontal-padding: 20px;
7
8
  }
8
9
 
9
10
  .container {
@@ -12,11 +13,10 @@
12
13
  width: 100%;
13
14
  border: 1px solid rgb(201, 201, 201);
14
15
  border-radius: 4px;
15
- padding: 15px 20px;
16
+ padding: 15px 0;
16
17
  position: relative;
17
18
  margin: var(--dx-c-filter-menu-margin);
18
19
  max-height: 650px;
19
- overflow-y: auto;
20
20
  }
21
21
 
22
22
  .caret-down {
@@ -36,6 +36,11 @@
36
36
  margin-left: 6px;
37
37
  }
38
38
 
39
+ .title-group {
40
+ position: relative;
41
+ margin: 0 var(--horizontal-padding);
42
+ }
43
+
39
44
  .filter-menu-title {
40
45
  font-size: 14px;
41
46
  font-family: var(--dx-g-font-sans);
@@ -44,7 +49,10 @@
44
49
  }
45
50
 
46
51
  .first-layer {
47
- padding-top: 12px;
52
+ height: 100%;
53
+ overflow-y: auto;
54
+ margin-top: 12px;
55
+ padding: 0 var(--horizontal-padding);
48
56
  }
49
57
 
50
58
  dx-checkbox:not(:first-of-type) {
package/src/modules/dx/filterMenu/filterMenu.html CHANGED
@@ -1,107 +1,96 @@
1
1
  <template>
2
2
  <form class="container">
3
- <ul>
3
+ <span class="title-group" onclick={dropdownToggle}>
4
+ <p class="filter-menu-title">{title}</p>
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="24"
8
+ height="24"
9
+ viewBox="0 0 24 24"
10
+ fill="none"
11
+ stroke-width="2"
12
+ stroke-linecap="round"
13
+ stroke-linejoin="round"
14
+ class="feather feather-chevron-down"
15
+ >
16
+ <polyline points="6 9 12 15 18 9"></polyline>
17
+ </svg>
18
+ </span>
19
+ <ul class="nested first-layer">
4
20
  <li>
5
- <span onclick={dropdownToggle}>
6
- <p class="filter-menu-title">{title}</p>
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width="24"
10
- height="24"
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- stroke-width="2"
14
- stroke-linecap="round"
15
- stroke-linejoin="round"
16
- class="feather feather-chevron-down"
17
- >
18
- <polyline points="6 9 12 15 18 9"></polyline>
19
- </svg>
20
- </span>
21
- <ul class="nested first-layer">
22
- <li>
23
- <template if:true={isBaseVariant}>
24
- <template
25
- for:each={filterMenuOptions}
26
- for:item="option"
27
- >
28
- <dx-checkbox
29
- key={option.id}
30
- label={option.name}
31
- name={option.name}
21
+ <template if:true={isBaseVariant}>
22
+ <template for:each={filterMenuOptions} for:item="option">
23
+ <dx-checkbox
24
+ key={option.id}
25
+ label={option.name}
26
+ name={option.name}
27
+ value={option}
28
+ checked={option.checked}
29
+ onchange={onChange}
30
+ ></dx-checkbox>
31
+ </template>
32
+ </template>
33
+ <template if:true={isNestedVariant}>
34
+ <ul>
35
+ <template
36
+ for:each={filterMenuOptions}
37
+ for:item="option"
38
+ >
39
+ <li key={option.id}>
40
+ <dx-checkbox-native
41
+ class="checkbox-year"
32
42
  value={option}
33
- checked={option.checked}
34
43
  onchange={onChange}
35
- ></dx-checkbox>
36
- </template>
37
- </template>
38
- <template if:true={isNestedVariant}>
39
- <ul>
40
- <template
41
- for:each={filterMenuOptions}
42
- for:item="option"
43
44
  >
44
- <li key={option.id}>
45
- <dx-checkbox-native
46
- class="checkbox-year"
47
- value={option}
48
- onchange={onChange}
49
- >
50
- {option.name}
51
- ({option.totalNumberOfPosts})
52
- </dx-checkbox-native>
53
- <span onclick={dropdownToggle}>
54
- <svg
55
- xmlns="http://www.w3.org/2000/svg"
56
- width="24"
57
- height="24"
58
- viewBox="0 0 24 24"
59
- fill="none"
60
- stroke-width="2"
61
- stroke-linecap="round"
62
- stroke-linejoin="round"
63
- class="
64
- feather feather-chevron-down
65
- year-svg
66
- "
67
- >
68
- <polyline
69
- points="6 9 12 15 18 9"
70
- ></polyline>
71
- </svg>
72
- </span>
73
- <ul class="nested second-layer">
74
- <template
75
- for:each={option.months}
76
- for:item="month"
45
+ {option.name} ({option.totalNumberOfPosts})
46
+ </dx-checkbox-native>
47
+ <span onclick={dropdownToggle}>
48
+ <svg
49
+ xmlns="http://www.w3.org/2000/svg"
50
+ width="24"
51
+ height="24"
52
+ viewBox="0 0 24 24"
53
+ fill="none"
54
+ stroke-width="2"
55
+ stroke-linecap="round"
56
+ stroke-linejoin="round"
57
+ class="
58
+ feather feather-chevron-down
59
+ year-svg
60
+ "
61
+ >
62
+ <polyline
63
+ points="6 9 12 15 18 9"
64
+ ></polyline>
65
+ </svg>
66
+ </span>
67
+ <ul class="nested second-layer">
68
+ <template
69
+ for:each={option.months}
70
+ for:item="month"
71
+ >
72
+ <li key={month.id}>
73
+ <dx-checkbox-native
74
+ id={month.id}
75
+ class="checkbox-month"
76
+ value={month}
77
+ onchange={onChange}
77
78
  >
78
- <li key={month.id}>
79
- <dx-checkbox-native
80
- id={month.id}
81
- class="checkbox-month"
82
- value={month}
83
- onchange={onChange}
84
- >
85
- {month.id}
86
- ({month.numberOfPosts})
87
- </dx-checkbox-native>
88
- </li>
89
- </template>
90
- </ul>
91
- </li>
92
- </template>
93
- </ul>
94
- </template>
95
- <template if:true={showViewMoreBtn}>
96
- <button
97
- class="view-more-btn"
98
- onclick={viewMoreToggle}
99
- >
100
- {viewMoreBtnText}
101
- </button>
79
+ {month.id}
80
+ ({month.numberOfPosts})
81
+ </dx-checkbox-native>
82
+ </li>
83
+ </template>
84
+ </ul>
85
+ </li>
102
86
  </template>
103
- </li>
104
- </ul>
87
+ </ul>
88
+ </template>
89
+ <template if:true={showViewMoreBtn}>
90
+ <button class="view-more-btn" onclick={viewMoreToggle}>
91
+ {viewMoreBtnText}
92
+ </button>
93
+ </template>
105
94
  </li>
106
95
  </ul>
107
96
  </form>
package/src/modules/dx/treeTile/treeTile.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { LightningElement, api } from "lwc";
2
2
  import cx from "classnames";
3
3
  import { InternalTreeNode } from "typings/custom";
4
- import { normalizeBoolean } from "utils/normalizers";
5
4
 
6
5
  const methodTextMap: {
7
6
  [key: string]: string;
@@ -20,22 +19,12 @@ export default class TreeTile extends LightningElement {
20
19
  @api hasChildren = false;
21
20
  @api isSelected = false;
22
21
  @api href!: string;
22
+ @api showArrow = false;
23
23
 
24
24
  get tileAriaLevel() {
25
25
  return this.treeNode.level + 2;
26
26
  }
27
27
 
28
- private _showArrow = false;
29
-
30
- @api
31
- get showArrow() {
32
- return this._showArrow;
33
- }
34
-
35
- set showArrow(value) {
36
- this._showArrow = normalizeBoolean(value);
37
- }
38
-
39
28
  private get iconSize() {
40
29
  return this.isRoot ? "small" : "xsmall";
41
30
  }