@pathscale/ui 1.1.1 → 1.1.3

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 (3) hide show
  1. package/dist/components/table/EnhancedTable.js +97 -30
  2. package/dist/components/theme-color-picker/ThemeColorPicker.js +70 -30
  3. package/package.json +1 -1
package/dist/components/table/EnhancedTable.js CHANGED
@@ -10,7 +10,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__ from "../input/
10
10
  import * as __WEBPACK_EXTERNAL_MODULE__dropdown_Dropdown_js_1eafe997__ from "../dropdown/Dropdown.js";
11
11
  import * as __WEBPACK_EXTERNAL_MODULE__loading_Loading_js_1fa096bd__ from "../loading/Loading.js";
12
12
  import * as __WEBPACK_EXTERNAL_MODULE__menu_Menu_js_2e8cbfbf__ from "../menu/Menu.js";
13
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="cursor-pointer ml-auto">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=mb-2></div><div class="flex gap-2 justify-end">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="enhanced-table-footer shrink-0 border-t border-base-300"><div class="px-4 py-3"><div><div class="flex items-center gap-2"><span class=opacity-70>Rows per page</span></div><div class="flex items-center gap-3 ml-4"><span class=opacity-70>Page <!> of </span><div class=join>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="enhanced-table-root flex h-full min-h-0 w-full flex-col"><div class="enhanced-table-scroll flex-1 min-h-0 overflow-y-auto overflow-x-auto">'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2"><div class=truncate></div><div class=grow>'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex gap-2">');
13
+ var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="cursor-pointer ml-auto shrink-0">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class=mb-2></div><div class="flex gap-2 justify-end">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="enhanced-table-footer shrink-0 border-t border-base-300"><div class="px-4 py-3"><div><div class="flex items-center gap-2"><span class=opacity-70>Rows per page</span></div><div class="flex items-center gap-3 ml-4"><span class=opacity-70>Page <!> of </span><div class=join>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="enhanced-table-root flex h-full min-h-0 w-full flex-col"><div class="enhanced-table-scroll flex-1 min-h-0 overflow-y-auto overflow-x-auto">'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-2"><div class=truncate>'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex gap-2">');
14
14
  function EnhancedTable_EnhancedTable(props) {
15
15
  const [local, tableProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
16
16
  "data",
@@ -128,12 +128,61 @@ function EnhancedTable_EnhancedTable(props) {
128
128
  });
129
129
  const headerGroups = ()=>table.getHeaderGroups();
130
130
  const totalColumns = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>table.getVisibleLeafColumns().length + (local.enableRowSelection ? 1 : 0) + (local.expandable ? 1 : 0));
131
+ const filterTriggerRefs = new Map();
132
+ const [filterPanelStyle, setFilterPanelStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
133
+ position: "fixed",
134
+ top: "0px",
135
+ left: "0px",
136
+ "z-index": 1300
137
+ });
138
+ let filterPanelRef;
139
+ const updateFilterPanelPosition = ()=>{
140
+ const colId = openFilterFor();
141
+ if (!colId) return;
142
+ const triggerEl = filterTriggerRefs.get(colId);
143
+ if (!triggerEl) return;
144
+ const rect = triggerEl.getBoundingClientRect();
145
+ const panelWidth = 224;
146
+ const offset = 6;
147
+ const viewportPadding = 8;
148
+ let left = rect.right - panelWidth;
149
+ left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
150
+ let top = rect.bottom + offset;
151
+ if (filterPanelRef) {
152
+ const panelHeight = filterPanelRef.getBoundingClientRect().height;
153
+ if (top + panelHeight > window.innerHeight - viewportPadding) {
154
+ const above = rect.top - panelHeight - offset;
155
+ top = above >= viewportPadding ? above : Math.max(viewportPadding, window.innerHeight - panelHeight - viewportPadding);
156
+ }
157
+ }
158
+ setFilterPanelStyle({
159
+ position: "fixed",
160
+ top: `${top}px`,
161
+ left: `${left}px`,
162
+ "z-index": 1300
163
+ });
164
+ };
165
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
166
+ if (!openFilterFor()) return;
167
+ requestAnimationFrame(()=>{
168
+ updateFilterPanelPosition();
169
+ requestAnimationFrame(updateFilterPanelPosition);
170
+ });
171
+ const onViewportChange = ()=>updateFilterPanelPosition();
172
+ window.addEventListener("resize", onViewportChange);
173
+ window.addEventListener("scroll", onViewportChange, true);
174
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
175
+ window.removeEventListener("resize", onViewportChange);
176
+ window.removeEventListener("scroll", onViewportChange, true);
177
+ });
178
+ });
131
179
  const FilterIconTrigger = (props)=>(()=>{
132
180
  var _el$ = _tmpl$();
133
181
  _el$.$$click = (e)=>{
134
182
  e.stopPropagation();
135
183
  if (!props.disabled) setOpenFilterFor((c)=>c === props.colId ? null : props.colId);
136
184
  };
185
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>filterTriggerRefs.set(props.colId, el), _el$);
137
186
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.filterIcon);
138
187
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.classList)(_el$, {
139
188
  "opacity-50 pointer-events-none": props.disabled,
@@ -149,28 +198,46 @@ function EnhancedTable_EnhancedTable(props) {
149
198
  return openFilterFor() === colId;
150
199
  },
151
200
  get children () {
152
- var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
153
- _el$2.$$click = (e)=>e.stopPropagation();
154
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColumnFilter, {
155
- column: col
156
- }));
157
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
158
- size: "sm",
159
- variant: "outline",
160
- onClick: ()=>{
161
- col.setFilterValue(void 0);
162
- setOpenFilterFor(null);
201
+ return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
202
+ get mount () {
203
+ return "undefined" == typeof document ? void 0 : document.body;
163
204
  },
164
- children: "Clear"
165
- }), null);
166
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
167
- size: "sm",
168
- variant: "primary",
169
- onClick: ()=>setOpenFilterFor(null),
170
- children: "Apply"
171
- }), null);
172
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, local.filterPanelClass ?? "absolute right-0 top-full mt-1 z-20 bg-base-100 border border-base-300 shadow rounded-box p-2 w-56"));
173
- return _el$2;
205
+ get children () {
206
+ var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
207
+ _el$2.$$click = (e)=>e.stopPropagation();
208
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
209
+ filterPanelRef = el;
210
+ }, _el$2);
211
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColumnFilter, {
212
+ column: col
213
+ }));
214
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
215
+ size: "sm",
216
+ variant: "outline",
217
+ onClick: ()=>{
218
+ col.setFilterValue(void 0);
219
+ setOpenFilterFor(null);
220
+ },
221
+ children: "Clear"
222
+ }), null);
223
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
224
+ size: "sm",
225
+ variant: "primary",
226
+ onClick: ()=>setOpenFilterFor(null),
227
+ children: "Apply"
228
+ }), null);
229
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
230
+ var _v$ = filterPanelStyle(), _v$2 = local.filterPanelClass ?? "z-[1300] w-56 border border-nf-border bg-nf-surface-1 shadow-lg rounded-box p-2";
231
+ _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$, _p$.e);
232
+ _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.t = _v$2);
233
+ return _p$;
234
+ }, {
235
+ e: void 0,
236
+ t: void 0
237
+ });
238
+ return _el$2;
239
+ }
240
+ });
174
241
  }
175
242
  });
176
243
  };
@@ -310,7 +377,7 @@ function EnhancedTable_EnhancedTable(props) {
310
377
  return canSort ? header.column.getToggleSortingHandler() : void 0;
311
378
  },
312
379
  get children () {
313
- var _el$17 = _tmpl$5(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
380
+ var _el$17 = _tmpl$5(), _el$18 = _el$17.firstChild;
314
381
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, ()=>(0, __WEBPACK_EXTERNAL_MODULE__tanstack_solid_table_1239d047__.flexRender)(header.column.columnDef.header, header.getContext()));
315
382
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
316
383
  get when () {
@@ -319,7 +386,7 @@ function EnhancedTable_EnhancedTable(props) {
319
386
  get children () {
320
387
  return local.sortAscIcon;
321
388
  }
322
- }), _el$19);
389
+ }), null);
323
390
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
324
391
  get when () {
325
392
  return "desc" === header.column.getIsSorted();
@@ -327,7 +394,7 @@ function EnhancedTable_EnhancedTable(props) {
327
394
  get children () {
328
395
  return local.sortDescIcon;
329
396
  }
330
- }), _el$19);
397
+ }), null);
331
398
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
332
399
  get when () {
333
400
  return canSort && false === header.column.getIsSorted() && local.sortNeutralIcon;
@@ -335,7 +402,7 @@ function EnhancedTable_EnhancedTable(props) {
335
402
  get children () {
336
403
  return local.sortNeutralIcon;
337
404
  }
338
- }), _el$19);
405
+ }), null);
339
406
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
340
407
  when: canFilter,
341
408
  get children () {
@@ -640,8 +707,8 @@ function ColumnFilter(props) {
640
707
  ]);
641
708
  };
642
709
  return (()=>{
643
- var _el$20 = _tmpl$6();
644
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$20, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__["default"], {
710
+ var _el$19 = _tmpl$6();
711
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$19, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__["default"], {
645
712
  size: "sm",
646
713
  type: "number",
647
714
  placeholder: "Min",
@@ -650,7 +717,7 @@ function ColumnFilter(props) {
650
717
  },
651
718
  onInput: (e)=>setRange(e.currentTarget.value, v[1])
652
719
  }), null);
653
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$20, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__["default"], {
720
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$19, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_Input_js_ae745814__["default"], {
654
721
  size: "sm",
655
722
  type: "number",
656
723
  placeholder: "Max",
@@ -659,7 +726,7 @@ function ColumnFilter(props) {
659
726
  },
660
727
  onInput: (e)=>setRange(v[0], e.currentTarget.value)
661
728
  }), null);
662
- return _el$20;
729
+ return _el$19;
663
730
  })();
664
731
  }
665
732
  if ("select" === type) {
package/dist/components/theme-color-picker/ThemeColorPicker.js CHANGED
@@ -5,11 +5,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__ from "../colorpicker/index.js";
6
6
  import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
7
7
  import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
8
- import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
9
- import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
10
8
  import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
11
9
  import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
12
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=space-y-3><div class="flex justify-center">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 w-[248px] rounded-lg border border-base-300 bg-base-100 p-4 shadow-xl">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
10
+ var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-3"><div class="flex justify-center"></div><div class="flex flex-col gap-1.5">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110">');
13
11
  function hueToColorValue(hue, sat) {
14
12
  if (null === hue) return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
15
13
  return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(hue, sat, 50, 1);
@@ -46,14 +44,58 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
46
44
  if (s < 10 && l > 90) return void setThemeColor(null, 100);
47
45
  setThemeColor(h, s);
48
46
  };
49
- const handleHueChange = (hue)=>{
50
- const saturation = null === store().hueShift() ? 100 : store().hueSaturation();
51
- setThemeColor(hue, saturation);
52
- };
53
- const handleFieldChange = (value)=>{
54
- const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
55
- if (!parsed) return;
56
- handleColorChange(parsed);
47
+ const GRAYSCALE_HUES = [
48
+ {
49
+ label: "White",
50
+ hsl: [
51
+ 0,
52
+ 0,
53
+ 100
54
+ ]
55
+ },
56
+ {
57
+ label: "Light gray",
58
+ hsl: [
59
+ 0,
60
+ 0,
61
+ 80
62
+ ]
63
+ },
64
+ {
65
+ label: "Gray",
66
+ hsl: [
67
+ 0,
68
+ 0,
69
+ 60
70
+ ]
71
+ },
72
+ {
73
+ label: "Dark gray",
74
+ hsl: [
75
+ 0,
76
+ 0,
77
+ 40
78
+ ]
79
+ },
80
+ {
81
+ label: "Charcoal",
82
+ hsl: [
83
+ 0,
84
+ 0,
85
+ 20
86
+ ]
87
+ },
88
+ {
89
+ label: "Black",
90
+ hsl: [
91
+ 0,
92
+ 0,
93
+ 0
94
+ ]
95
+ }
96
+ ];
97
+ const handleGrayscale = (hsl)=>{
98
+ setThemeColor(null, 100);
57
99
  };
58
100
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
59
101
  if (!isOpen()) return;
@@ -134,27 +176,24 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
134
176
  return contextValue();
135
177
  },
136
178
  get children () {
137
- var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
179
+ var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
138
180
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
139
181
  class: "color-wheel-custom"
140
182
  }));
141
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], {
142
- type: "hue",
143
- get value () {
144
- return colorValue().hsl.h;
145
- },
146
- onChange: handleHueChange,
147
- "aria-label": "Theme hue"
148
- }), null);
149
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], {
150
- get value () {
151
- return colorValue().hex.toUpperCase();
152
- },
153
- format: "hex",
154
- onChange: handleFieldChange,
155
- "aria-label": "Theme color value",
156
- fullWidth: true
157
- }), null);
183
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>GRAYSCALE_HUES.map((g)=>(()=>{
184
+ var _el$6 = _tmpl$4();
185
+ _el$6.$$click = ()=>handleGrayscale(g.hsl);
186
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
187
+ var _v$ = `hsl(${g.hsl[0]}, ${g.hsl[1]}%, ${g.hsl[2]}%)`, _v$2 = g.label;
188
+ _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$6.style.setProperty("background-color", _v$) : _el$6.style.removeProperty("background-color"));
189
+ _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-label", _p$.t = _v$2);
190
+ return _p$;
191
+ }, {
192
+ e: void 0,
193
+ t: void 0
194
+ });
195
+ return _el$6;
196
+ })()));
158
197
  return _el$3;
159
198
  }
160
199
  }));
@@ -167,6 +206,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
167
206
  };
168
207
  const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
169
208
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
170
- "keydown"
209
+ "keydown",
210
+ "click"
171
211
  ]);
172
212
  export { ThemeColorPicker as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pathscale/ui",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "author": "pathscale",
5
5
  "repository": {
6
6
  "type": "git",