@design.estate/dees-wcctools 1.0.101 → 1.1.1

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.
@@ -5,6 +5,7 @@ export declare class WccSidebar extends DeesElement {
5
5
  selectedItem: DeesElement | (() => TemplateResult);
6
6
  selectedType: TElementType;
7
7
  dashboardRef: WccDashboard;
8
+ isFullscreen: boolean;
8
9
  render(): TemplateResult;
9
10
  selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement): void;
10
11
  }
@@ -11,33 +11,74 @@ import * as plugins from '../wcctools.plugins.js';
11
11
  import { DeesElement, property, html, customElement } from '@design.estate/dees-element';
12
12
  import { WccDashboard } from './wcc-dashboard.js';
13
13
  let WccSidebar = class WccSidebar extends DeesElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this.isFullscreen = false;
17
+ }
14
18
  render() {
15
19
  return html `
16
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
20
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
17
21
  <style>
18
22
  :host {
19
- display: block;
20
- border-right: 1px solid #999;
21
- font-family: 'Roboto', 'Inter', sans-serif;
22
- font-size: 12px;
23
+ /* CSS Variables - Always dark theme to match wcc-properties */
24
+ --background: #0a0a0a;
25
+ --foreground: #e5e5e5;
26
+ --card: #0f0f0f;
27
+ --card-foreground: #f0f0f0;
28
+ --muted: #1a1a1a;
29
+ --muted-foreground: #666;
30
+ --accent: #222;
31
+ --accent-foreground: #fff;
32
+ --border: rgba(255, 255, 255, 0.06);
33
+ --input: #141414;
34
+ --primary: #3b82f6;
35
+ --primary-foreground: #fff;
36
+ --ring: #3b82f6;
37
+ --radius: 4px;
38
+
39
+ display: ${this.isFullscreen ? 'none' : 'block'};
40
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
41
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
42
+ font-size: 14px;
23
43
  box-sizing: border-box;
24
44
  position: absolute;
25
45
  left: 0px;
26
46
  width: 200px;
27
47
  top: 0px;
28
48
  bottom: 0px;
29
- overflow-y: scroll;
49
+ overflow-y: auto;
30
50
  overflow-x: hidden;
31
- background: #222;
32
- color: #fff;
33
- padding: 5px;
51
+ background: var(--background);
52
+ color: var(--foreground);
53
+ }
54
+
55
+ .menu {
56
+ padding: 0.5rem 0;
57
+ }
58
+
59
+ h3 {
60
+ padding: 0.3rem 0.75rem;
61
+ font-size: 0.65rem;
62
+ font-weight: 500;
63
+ text-transform: uppercase;
64
+ letter-spacing: 0.08em;
65
+ color: #888;
66
+ margin: 0;
67
+ margin-top: 0.5rem;
68
+ background: rgba(59, 130, 246, 0.03);
69
+ border-bottom: 1px solid var(--border);
70
+ border-top: 1px solid var(--border);
71
+ }
72
+
73
+ h3:first-child {
74
+ margin-top: 0;
34
75
  }
35
76
 
36
77
  .material-symbols-outlined {
37
78
  font-family: 'Material Symbols Outlined';
38
79
  font-weight: normal;
39
80
  font-style: normal;
40
- font-size: 24px; /* Preferred icon size */
81
+ font-size: 16px;
41
82
  display: inline-block;
42
83
  line-height: 1;
43
84
  text-transform: none;
@@ -45,51 +86,75 @@ let WccSidebar = class WccSidebar extends DeesElement {
45
86
  word-wrap: normal;
46
87
  white-space: nowrap;
47
88
  direction: ltr;
48
- font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
89
+ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
90
+ opacity: 0.5;
49
91
  }
50
92
 
51
93
  .selectOption {
52
94
  user-select: none;
53
95
  position: relative;
54
- line-height: 24px;
55
- padding: 5px;
56
- transition: all 0.2s;
96
+ margin: 0.125rem 0.5rem;
97
+ padding: 0.5rem 0.75rem;
98
+ transition: all 0.15s ease;
57
99
  display: grid;
58
- grid-template-columns: 28px auto;
100
+ grid-template-columns: 20px 1fr;
101
+ align-items: center;
102
+ gap: 0.5rem;
103
+ border-radius: var(--radius);
104
+ cursor: pointer;
105
+ font-size: 0.75rem;
106
+ color: #999;
107
+ background: transparent;
59
108
  }
109
+
60
110
  .selectOption:hover {
61
- padding: 5px;
62
- color: #333;
63
- background: #fff;
111
+ background: rgba(59, 130, 246, 0.05);
112
+ color: #bbb;
113
+ }
114
+
115
+ .selectOption:hover .material-symbols-outlined {
116
+ opacity: 0.7;
64
117
  }
65
118
 
66
119
  .selectOption.selected {
67
- background: #455A64;;
120
+ background: rgba(59, 130, 246, 0.15);
121
+ color: var(--primary);
122
+ }
123
+
124
+ .selectOption.selected .material-symbols-outlined {
125
+ opacity: 1;
126
+ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
68
127
  }
69
128
 
70
129
  .selectOption.selected:hover {
71
- color: #ffffff;
72
- background: #455A64;
130
+ background: rgba(59, 130, 246, 0.2);
131
+ color: var(--primary);
73
132
  }
74
133
 
75
- .selectOption .material-symbols-outlined {
76
- color: #666;
134
+ .selectOption .text {
77
135
  display: block;
78
- transition: all 0.2s;
136
+ overflow: hidden;
137
+ text-overflow: ellipsis;
138
+ white-space: nowrap;
139
+ font-weight: 400;
79
140
  }
80
141
 
81
- .selectOption.selected .material-symbols-outlined {
82
- color: #000;
142
+ ::-webkit-scrollbar {
143
+ width: 8px;
83
144
  }
84
145
 
85
- .selectOption .text {
86
- display: block;
87
- word-wrap: break-word;
88
- word-break: break-all;
89
- max-width: 100%;
146
+ ::-webkit-scrollbar-track {
147
+ background: transparent;
90
148
  }
91
149
 
92
-
150
+ ::-webkit-scrollbar-thumb {
151
+ background: rgba(255, 255, 255, 0.1);
152
+ border-radius: 4px;
153
+ }
154
+
155
+ ::-webkit-scrollbar-thumb:hover {
156
+ background: rgba(255, 255, 255, 0.2);
157
+ }
93
158
  </style>
94
159
  <div class="menu">
95
160
  <h3>Pages</h3>
@@ -163,8 +228,12 @@ __decorate([
163
228
  property(),
164
229
  __metadata("design:type", WccDashboard)
165
230
  ], WccSidebar.prototype, "dashboardRef", void 0);
231
+ __decorate([
232
+ property(),
233
+ __metadata("design:type", Boolean)
234
+ ], WccSidebar.prototype, "isFullscreen", void 0);
166
235
  WccSidebar = __decorate([
167
236
  customElement('wcc-sidebar')
168
237
  ], WccSidebar);
169
238
  export { WccSidebar };
170
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQzlHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUszQyxJQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVztJQVVsQyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztVQWlGTCxDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuRCxPQUFPLEtBQUssQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQzFCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUMvQyxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSTt5QkFDM0QsS0FBSyxJQUFJLEVBQUU7b0JBQ2xCLE1BQU0sUUFBUSxHQUFHLE1BQU0sT0FBTyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7b0JBQ3JFLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQztnQkFDMUMsQ0FBQzs7O29DQUdtQixRQUFROzthQUUvQixDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsRUFBRTs7VUFFRixDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUN6RCxPQUFPLFFBQVEsQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLEVBQUU7Z0JBQ2hDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUNyRCxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSTt5QkFDM0QsS0FBSyxJQUFJLEVBQUU7b0JBQ2xCLE1BQU0sUUFBUSxHQUFHLE1BQU0sT0FBTyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7b0JBQ3JFLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsQ0FBQztnQkFDaEQsQ0FBQzs7O29DQUdtQixXQUFXOzthQUVsQyxDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsRUFBRTs7S0FFUCxDQUFDO0lBQ0osQ0FBQztJQUVNLFVBQVUsQ0FBQyxPQUFxQixFQUFFLFdBQW1CLEVBQUUsT0FBNkM7UUFDekcsT0FBTyxDQUFDLEdBQUcsQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUM3QixPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3pCLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDNUIsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsY0FBYyxFQUFFO1lBQzlCLE1BQU0sRUFBRSxPQUFPO1NBQ2hCLENBQUMsQ0FDSCxDQUFDO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsa0JBQWtCLEVBQUU7WUFDbEMsTUFBTSxFQUFFLFdBQVc7U0FDcEIsQ0FBQyxDQUNILENBQUM7UUFDRixJQUFJLENBQUMsYUFBYSxDQUNoQixJQUFJLFdBQVcsQ0FBQyxjQUFjLEVBQUU7WUFDOUIsTUFBTSxFQUFFLE9BQU87U0FDaEIsQ0FBQyxDQUNILENBQUM7UUFFRixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7Q0FDRixDQUFBO0FBM0pRO0lBRE4sUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDOztnREFDMkI7QUFHbkQ7SUFETixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7O2dEQUNHO0FBRzNCO0lBRE4sUUFBUSxFQUFFOzhCQUNVLFlBQVk7Z0RBQUM7QUFSdkIsVUFBVTtJQUR0QixhQUFhLENBQUMsYUFBYSxDQUFDO0dBQ2hCLFVBQVUsQ0E2SnRCIn0=
239
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQzlHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUszQyxJQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVztJQUFwQzs7UUFXRSxpQkFBWSxHQUFZLEtBQUssQ0FBQztJQWtOdkMsQ0FBQztJQWhOUSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3FCQW9CTSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU87Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O1VBMEgvQyxDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuRCxPQUFPLEtBQUssQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQzFCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUMvQyxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxD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