@cas-smartdesign/splitter 0.1.0 → 0.2.0

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 (8) hide show
  1. package/dist/docs/doc.css +1 -1
  2. package/dist/docs/doc.mjs +46 -43
  3. package/dist/splitter-with-externals.js +17 -95
  4. package/dist/splitter-with-externals.js.map +4 -4
  5. package/dist/splitter.mjs +46 -46
  6. package/dist/splitter.mjs.map +1 -1
  7. package/npm-third-party-licenses.json +52 -47
  8. package/package.json +4 -4
package/dist/splitter.mjs CHANGED
@@ -1,12 +1,12 @@
1
- import { LitElement as m, html as c, css as S, unsafeCSS as y } from "lit";
2
- import { property as w, query as n, state as h } from "lit/decorators.js";
1
+ import { LitElement as m, html as c, unsafeCSS as S, css as y } from "lit";
2
+ import { property as w, query as n, state as a } from "lit/decorators.js";
3
3
  import { classMap as b } from "lit/directives/class-map.js";
4
4
  import { styleMap as p } from "lit/directives/style-map.js";
5
5
  const x = ":host{display:block;--sd-splitter-gap: 0px;--sd-splitter-cursor: ew-resize;--sd-splitter-width: 0px;--sd-splitter-color: transparent;--sd-splitter-handle-width: 5px;--sd-splitter-handle-color: #1467ba}#root{display:flex;height:100%;width:100%;justify-content:space-between;gap:var(--sd-splitter-gap)}.pane{overflow:hidden}::slotted([slot=left]),::slotted([slot=right]){width:100%;height:100%}::slotted([slot=splitter]){flex:none;touch-action:none}#default-splitter{flex:none;touch-action:none;width:var(--sd-splitter-width);position:relative;background-color:var(--sd-splitter-color)}#default-splitter-handle{position:absolute;top:0;left:calc((var(--sd-splitter-width) - var(--sd-splitter-handle-width)) / 2);right:0;bottom:0;width:var(--sd-splitter-handle-width);background-color:var(--sd-splitter-handle-color);opacity:0;transition:opacity .2s}#default-splitter-drag-area{position:absolute;top:0;left:-3px;width:calc(var(--sd-splitter-handle-width) + 6px);bottom:0}#default-splitter-handle.hover,#default-splitter-handle.drag{opacity:1}#default-splitter-handle.hover{transition-delay:.5s}#default-splitter-handle.drag{transition:none}";
6
- var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (d, t, e, s) => {
7
- for (var o = s > 1 ? void 0 : s ? D(t, e) : t, l = d.length - 1, a; l >= 0; l--)
8
- (a = d[l]) && (o = (s ? a(t, e, o) : a(o)) || o);
9
- return s && o && C(t, e, o), o;
6
+ var C = Object.defineProperty, s = (d, t, e, r) => {
7
+ for (var o = void 0, l = d.length - 1, h; l >= 0; l--)
8
+ (h = d[l]) && (o = h(t, e, o) || o);
9
+ return o && C(t, e, o), o;
10
10
  };
11
11
  const g = class g extends m {
12
12
  constructor() {
@@ -52,8 +52,8 @@ const g = class g extends m {
52
52
  disconnectedCallback() {
53
53
  super.disconnectedCallback(), this._resizeObserver.unobserve(this);
54
54
  }
55
- _assignSlotted(t, e, s) {
56
- e.assignedElements().length > 1 && console.warn(`At most one element can be assigned to slot '${t}' in sd-splitter.`), s(e.assignedElements()[0]);
55
+ _assignSlotted(t, e, r) {
56
+ e.assignedElements().length > 1 && console.warn(`At most one element can be assigned to slot '${t}' in sd-splitter.`), r(e.assignedElements()[0]);
57
57
  }
58
58
  _handleResize() {
59
59
  !this._leftSlotted || !this._rightSlotted || this._recomputeRatio(this._leftPane.offsetWidth);
@@ -62,8 +62,8 @@ const g = class g extends m {
62
62
  const e = this._getAvailableWidth();
63
63
  if (e <= 0)
64
64
  return;
65
- const [s, o] = this._getMinMaxWidth(this._leftSlot), [l, a] = this._getMinMaxWidth(this._rightSlot), u = Math.max(s, e - a), v = Math.min(o, e - l), _ = Math.max(u, Math.min(t, v)), f = e - _;
66
- this._setRatio(_, f);
65
+ const [r, o] = this._getMinMaxWidth(this._leftSlot), [l, h] = this._getMinMaxWidth(this._rightSlot), u = Math.max(r, e - h), f = Math.min(o, e - l), _ = Math.max(u, Math.min(t, f)), v = e - _;
66
+ this._setRatio(_, v);
67
67
  }
68
68
  _getAvailableWidth() {
69
69
  const t = parseFloat(getComputedStyle(this._root).getPropertyValue("gap")) || 0;
@@ -77,10 +77,10 @@ const g = class g extends m {
77
77
  return [parseFloat(e.minWidth) || 0, parseFloat(e.maxWidth) || 1 / 0];
78
78
  }
79
79
  _setRatio(t, e) {
80
- const s = t + e;
81
- if (s === 0)
80
+ const r = t + e;
81
+ if (r === 0)
82
82
  return [0.5, 0.5];
83
- this.ratio = [t / s, e / s], this.dispatchEvent(new L(this.ratio));
83
+ this.ratio = [t / r, e / r], this.dispatchEvent(new L(this.ratio));
84
84
  }
85
85
  render() {
86
86
  if (!this._leftSlotted || !this._rightSlotted)
@@ -91,9 +91,9 @@ const g = class g extends m {
91
91
  <slot name="right" @slotchange=${this._onRightSlotChange} ?hidden=${!this._rightSlotted}></slot>
92
92
  </div>
93
93
  `;
94
- const [t, e] = this.ratio, s = this._hovering ? getComputedStyle(this).getPropertyValue("--sd-splitter-cursor") : "inherit";
94
+ const [t, e] = this.ratio, r = this._hovering ? getComputedStyle(this).getPropertyValue("--sd-splitter-cursor") : "inherit";
95
95
  return c`
96
- <div id="root" style=${p({ cursor: s })}>
96
+ <div id="root" style=${p({ cursor: r })}>
97
97
  <div id="left" class="pane" style=${p({ flex: t + " " + t + " 0" })}>
98
98
  <slot name="left" @slotchange=${this._onLeftSlotChange}></slot>
99
99
  </div>
@@ -120,50 +120,50 @@ const g = class g extends m {
120
120
  }
121
121
  static get styles() {
122
122
  return [
123
- S`
124
- ${y(x)}
123
+ y`
124
+ ${S(x)}
125
125
  `
126
126
  ];
127
127
  }
128
128
  };
129
129
  g.ID = "sd-splitter";
130
130
  let i = g;
131
- r([
131
+ s([
132
132
  w({ type: Array, reflect: !0 })
133
- ], i.prototype, "ratio", 2);
134
- r([
133
+ ], i.prototype, "ratio");
134
+ s([
135
135
  n("#root", !0)
136
- ], i.prototype, "_root", 2);
137
- r([
136
+ ], i.prototype, "_root");
137
+ s([
138
138
  n("#left")
139
- ], i.prototype, "_leftPane", 2);
140
- r([
139
+ ], i.prototype, "_leftPane");
140
+ s([
141
141
  n('slot[name="left"]')
142
- ], i.prototype, "_leftSlot", 2);
143
- r([
142
+ ], i.prototype, "_leftSlot");
143
+ s([
144
144
  n('slot[name="right"]')
145
- ], i.prototype, "_rightSlot", 2);
146
- r([
145
+ ], i.prototype, "_rightSlot");
146
+ s([
147
147
  n('slot[name="splitter"]')
148
- ], i.prototype, "_splitterSlot", 2);
149
- r([
148
+ ], i.prototype, "_splitterSlot");
149
+ s([
150
150
  n("#default-splitter")
151
- ], i.prototype, "_defaultSplitter", 2);
152
- r([
153
- h()
154
- ], i.prototype, "_leftSlotted", 2);
155
- r([
156
- h()
157
- ], i.prototype, "_rightSlotted", 2);
158
- r([
159
- h()
160
- ], i.prototype, "_customSplitter", 2);
161
- r([
162
- h()
163
- ], i.prototype, "_hovering", 2);
164
- r([
165
- h()
166
- ], i.prototype, "_dragging", 2);
151
+ ], i.prototype, "_defaultSplitter");
152
+ s([
153
+ a()
154
+ ], i.prototype, "_leftSlotted");
155
+ s([
156
+ a()
157
+ ], i.prototype, "_rightSlotted");
158
+ s([
159
+ a()
160
+ ], i.prototype, "_customSplitter");
161
+ s([
162
+ a()
163
+ ], i.prototype, "_hovering");
164
+ s([
165
+ a()
166
+ ], i.prototype, "_dragging");
167
167
  customElements.get(i.ID) || customElements.define(i.ID, i);
168
168
  class L extends Event {
169
169
  constructor(t) {
package/dist/splitter.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"splitter.mjs","sources":["../splitter.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { customElement, property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport style from \"./style.scss?inline\";\n\nexport class Splitter extends LitElement {\n public static readonly ID = \"sd-splitter\";\n\n @property({ type: Array, reflect: true })\n ratio: [number, number] = [1, 1];\n\n @query(\"#root\", true)\n private _root: HTMLElement;\n @query(\"#left\")\n private _leftPane: HTMLElement;\n @query('slot[name=\"left\"]')\n private _leftSlot: HTMLSlotElement;\n @query('slot[name=\"right\"]')\n private _rightSlot: HTMLSlotElement;\n @query('slot[name=\"splitter\"]')\n private _splitterSlot: HTMLSlotElement;\n @query(\"#default-splitter\")\n private _defaultSplitter: HTMLElement;\n\n @state()\n private _leftSlotted?: HTMLElement;\n @state()\n private _rightSlotted?: HTMLElement;\n @state()\n private _customSplitter?: HTMLElement;\n private _customSplitterCleanup?: () => void;\n\n @state()\n _hovering: boolean = false;\n @state()\n _dragging: boolean = false;\n\n private _resizeObserver: ResizeObserver;\n private _startX = 0;\n private _startLeftWidth = 0;\n\n constructor() {\n super();\n this._resizeObserver = new ResizeObserver(() => {\n this._handleResize();\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._resizeObserver.observe(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._resizeObserver.unobserve(this);\n }\n\n private _onLeftSlotChange = () => {\n this._assignSlotted(\"left\", this._leftSlot, (element) => {\n this._leftSlotted = element;\n });\n };\n\n private _onRightSlotChange = () => {\n this._assignSlotted(\"right\", this._rightSlot, (element) => {\n this._rightSlotted = element;\n });\n };\n\n private _onSplitterSlotChange = () => {\n if (this._customSplitterCleanup) {\n this._customSplitterCleanup();\n this._customSplitterCleanup = undefined;\n }\n this._assignSlotted(\"splitter\", this._splitterSlot, (element) => {\n this._customSplitter = element;\n });\n if (this._customSplitter) {\n const dragArea = this._customSplitter.querySelector(\".sd-splitter-drag-area\") || this._customSplitter;\n dragArea.addEventListener(\"pointerenter\", this._enterDragArea);\n dragArea.addEventListener(\"pointerleave\", this._leaveDragArea);\n dragArea.addEventListener(\"pointerdown\", this._startDrag);\n this._customSplitterCleanup = () => {\n dragArea.removeEventListener(\"pointerenter\", this._enterDragArea);\n dragArea.removeEventListener(\"pointerleave\", this._leaveDragArea);\n dragArea.removeEventListener(\"pointerdown\", this._startDrag);\n };\n }\n };\n\n private _assignSlotted(slotName: string, slot: HTMLSlotElement, assignment: (HTMLElement) => void) {\n const numAssignedElements = slot.assignedElements().length;\n if (numAssignedElements > 1) {\n console.warn(`At most one element can be assigned to slot '${slotName}' in sd-splitter.`);\n }\n assignment(slot.assignedElements()[0] as HTMLElement);\n }\n\n private _enterDragArea = () => {\n this._hovering = true;\n this.setAttribute(\"hovering\", \"\");\n };\n\n private _leaveDragArea = () => {\n this._hovering = false;\n if (!this._dragging) {\n this.removeAttribute(\"hovering\");\n }\n };\n\n private _handleResize() {\n if (!this._leftSlotted || !this._rightSlotted) {\n return;\n }\n this._recomputeRatio(this._leftPane.offsetWidth);\n }\n\n private _startDrag = (e: PointerEvent) => {\n this._dragging = true;\n this.setAttribute(\"dragging\", \"\");\n this._startX = e.clientX;\n this._startLeftWidth = this._leftPane.offsetWidth;\n window.addEventListener(\"pointermove\", this._doDrag);\n window.addEventListener(\"pointerup\", this._endDrag);\n window.addEventListener(\"contextmenu\", this._preventContextMenu);\n window.document.body.style.cursor = getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\");\n e.preventDefault();\n };\n\n private _doDrag = (e: PointerEvent) => {\n if (!this._dragging) {\n return;\n }\n const deltaX = e.clientX - this._startX;\n this._recomputeRatio(this._startLeftWidth + deltaX);\n };\n\n private _endDrag = () => {\n this._dragging = false;\n this.removeAttribute(\"dragging\");\n if (!this._hovering) {\n this.removeAttribute(\"hovering\");\n }\n window.removeEventListener(\"pointermove\", this._doDrag);\n window.removeEventListener(\"pointerup\", this._endDrag);\n window.removeEventListener(\"contextmenu\", this._preventContextMenu);\n window.document.body.style.removeProperty(\"cursor\");\n };\n\n private _preventContextMenu = (e: PointerEvent) => {\n e.preventDefault();\n };\n\n private _recomputeRatio(leftWidth: number) {\n const availableWidth = this._getAvailableWidth();\n if (availableWidth <= 0) {\n return;\n }\n const [minLeft, maxLeft] = this._getMinMaxWidth(this._leftSlot);\n const [minRight, maxRight] = this._getMinMaxWidth(this._rightSlot);\n const effectiveMinLeft = Math.max(minLeft, availableWidth - maxRight);\n const effectiveMaxLeft = Math.min(maxLeft, availableWidth - minRight);\n const newLeftWidth = Math.max(effectiveMinLeft, Math.min(leftWidth, effectiveMaxLeft));\n const newRightWidth = availableWidth - newLeftWidth;\n this._setRatio(newLeftWidth, newRightWidth);\n }\n\n private _getAvailableWidth(): number {\n const gap = parseFloat(getComputedStyle(this._root).getPropertyValue(\"gap\")) || 0;\n return this.offsetWidth - this._getSplitter().offsetWidth - 2 * gap;\n }\n\n private _getSplitter(): HTMLElement {\n return this._customSplitter || this._defaultSplitter;\n }\n\n private _getMinMaxWidth(slot: HTMLSlotElement): [number, number] {\n const style = getComputedStyle(slot.assignedElements()[0]);\n return [parseFloat(style.minWidth) || 0, parseFloat(style.maxWidth) || Infinity];\n }\n\n private _setRatio(leftWidth: number, rightWidth: number) {\n const sum = leftWidth + rightWidth;\n if (sum === 0) {\n return [0.5, 0.5];\n }\n this.ratio = [leftWidth / sum, rightWidth / sum];\n this.dispatchEvent(new SplitterResizedEvent(this.ratio));\n }\n\n render() {\n if (!this._leftSlotted || !this._rightSlotted) {\n return html`\n <div id=\"root\">\n <slot name=\"left\" @slotchange=${this._onLeftSlotChange} ?hidden=${!this._leftSlotted}></slot>\n <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange} ?hidden=${true}></slot>\n <slot name=\"right\" @slotchange=${this._onRightSlotChange} ?hidden=${!this._rightSlotted}></slot>\n </div>\n `;\n }\n const [leftRatio, rightRatio] = this.ratio;\n const cursor = this._hovering ? getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\") : \"inherit\";\n return html`\n <div id=\"root\" style=${styleMap({ cursor })}>\n <div id=\"left\" class=\"pane\" style=${styleMap({ flex: leftRatio + \" \" + leftRatio + \" 0\" })}>\n <slot name=\"left\" @slotchange=${this._onLeftSlotChange}></slot>\n </div>\n <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange}>\n <div id=\"default-splitter\">\n <div\n id=\"default-splitter-handle\"\n class=${classMap({ hover: this._hovering, drag: this._dragging })}\n >\n <div\n id=\"default-splitter-drag-area\"\n @pointerenter=${this._enterDragArea}\n @pointerleave=${this._leaveDragArea}\n @pointerdown=${this._startDrag}\n ></div>\n </div>\n </div>\n </slot>\n <div id=\"right\" class=\"pane\" style=${styleMap({ flex: rightRatio + \" \" + rightRatio + \" 0\" })}>\n <slot name=\"right\" @slotchange=${this._onRightSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n}\n\nif (!customElements.get(Splitter.ID)) {\n customElements.define(Splitter.ID, Splitter);\n}\n\nexport class SplitterResizedEvent extends Event {\n readonly ratio: [number, number];\n constructor(ratio: [number, number]) {\n super(\"sd-splitter-resized\", { bubbles: true, composed: true });\n this.ratio = ratio;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"sd-splitter\": Splitter;\n }\n interface HTMLElementEventMap {\n \"sd-splitter-resized\": SplitterResizedEvent;\n }\n}\n"],"names":["_Splitter","LitElement","element","dragArea","e","deltaX","slotName","slot","assignment","leftWidth","availableWidth","minLeft","maxLeft","minRight","maxRight","effectiveMinLeft","effectiveMaxLeft","newLeftWidth","newRightWidth","gap","style","rightWidth","sum","SplitterResizedEvent","html","leftRatio","rightRatio","cursor","styleMap","classMap","css","unsafeCSS","Splitter","__decorateClass","property","query","state","ratio"],"mappings":"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"}
1
+ {"version":3,"file":"splitter.mjs","sources":["../splitter.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { customElement, property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport style from \"./style.scss?inline\";\n\nexport class Splitter extends LitElement {\n public static readonly ID = \"sd-splitter\";\n\n @property({ type: Array, reflect: true })\n ratio: [number, number] = [1, 1];\n\n @query(\"#root\", true)\n private _root: HTMLElement;\n @query(\"#left\")\n private _leftPane: HTMLElement;\n @query('slot[name=\"left\"]')\n private _leftSlot: HTMLSlotElement;\n @query('slot[name=\"right\"]')\n private _rightSlot: HTMLSlotElement;\n @query('slot[name=\"splitter\"]')\n private _splitterSlot: HTMLSlotElement;\n @query(\"#default-splitter\")\n private _defaultSplitter: HTMLElement;\n\n @state()\n private _leftSlotted?: HTMLElement;\n @state()\n private _rightSlotted?: HTMLElement;\n @state()\n private _customSplitter?: HTMLElement;\n private _customSplitterCleanup?: () => void;\n\n @state()\n _hovering: boolean = false;\n @state()\n _dragging: boolean = false;\n\n private _resizeObserver: ResizeObserver;\n private _startX = 0;\n private _startLeftWidth = 0;\n\n constructor() {\n super();\n this._resizeObserver = new ResizeObserver(() => {\n this._handleResize();\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._resizeObserver.observe(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._resizeObserver.unobserve(this);\n }\n\n private _onLeftSlotChange = () => {\n this._assignSlotted(\"left\", this._leftSlot, (element) => {\n this._leftSlotted = element;\n });\n };\n\n private _onRightSlotChange = () => {\n this._assignSlotted(\"right\", this._rightSlot, (element) => {\n this._rightSlotted = element;\n });\n };\n\n private _onSplitterSlotChange = () => {\n if (this._customSplitterCleanup) {\n this._customSplitterCleanup();\n this._customSplitterCleanup = undefined;\n }\n this._assignSlotted(\"splitter\", this._splitterSlot, (element) => {\n this._customSplitter = element;\n });\n if (this._customSplitter) {\n const dragArea = this._customSplitter.querySelector(\".sd-splitter-drag-area\") || this._customSplitter;\n dragArea.addEventListener(\"pointerenter\", this._enterDragArea);\n dragArea.addEventListener(\"pointerleave\", this._leaveDragArea);\n dragArea.addEventListener(\"pointerdown\", this._startDrag);\n this._customSplitterCleanup = () => {\n dragArea.removeEventListener(\"pointerenter\", this._enterDragArea);\n dragArea.removeEventListener(\"pointerleave\", this._leaveDragArea);\n dragArea.removeEventListener(\"pointerdown\", this._startDrag);\n };\n }\n };\n\n private _assignSlotted(slotName: string, slot: HTMLSlotElement, assignment: (HTMLElement) => void) {\n const numAssignedElements = slot.assignedElements().length;\n if (numAssignedElements > 1) {\n console.warn(`At most one element can be assigned to slot '${slotName}' in sd-splitter.`);\n }\n assignment(slot.assignedElements()[0] as HTMLElement);\n }\n\n private _enterDragArea = () => {\n this._hovering = true;\n this.setAttribute(\"hovering\", \"\");\n };\n\n private _leaveDragArea = () => {\n this._hovering = false;\n if (!this._dragging) {\n this.removeAttribute(\"hovering\");\n }\n };\n\n private _handleResize() {\n if (!this._leftSlotted || !this._rightSlotted) {\n return;\n }\n this._recomputeRatio(this._leftPane.offsetWidth);\n }\n\n private _startDrag = (e: PointerEvent) => {\n this._dragging = true;\n this.setAttribute(\"dragging\", \"\");\n this._startX = e.clientX;\n this._startLeftWidth = this._leftPane.offsetWidth;\n window.addEventListener(\"pointermove\", this._doDrag);\n window.addEventListener(\"pointerup\", this._endDrag);\n window.addEventListener(\"contextmenu\", this._preventContextMenu);\n window.document.body.style.cursor = getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\");\n e.preventDefault();\n };\n\n private _doDrag = (e: PointerEvent) => {\n if (!this._dragging) {\n return;\n }\n const deltaX = e.clientX - this._startX;\n this._recomputeRatio(this._startLeftWidth + deltaX);\n };\n\n private _endDrag = () => {\n this._dragging = false;\n this.removeAttribute(\"dragging\");\n if (!this._hovering) {\n this.removeAttribute(\"hovering\");\n }\n window.removeEventListener(\"pointermove\", this._doDrag);\n window.removeEventListener(\"pointerup\", this._endDrag);\n window.removeEventListener(\"contextmenu\", this._preventContextMenu);\n window.document.body.style.removeProperty(\"cursor\");\n };\n\n private _preventContextMenu = (e: PointerEvent) => {\n e.preventDefault();\n };\n\n private _recomputeRatio(leftWidth: number) {\n const availableWidth = this._getAvailableWidth();\n if (availableWidth <= 0) {\n return;\n }\n const [minLeft, maxLeft] = this._getMinMaxWidth(this._leftSlot);\n const [minRight, maxRight] = this._getMinMaxWidth(this._rightSlot);\n const effectiveMinLeft = Math.max(minLeft, availableWidth - maxRight);\n const effectiveMaxLeft = Math.min(maxLeft, availableWidth - minRight);\n const newLeftWidth = Math.max(effectiveMinLeft, Math.min(leftWidth, effectiveMaxLeft));\n const newRightWidth = availableWidth - newLeftWidth;\n this._setRatio(newLeftWidth, newRightWidth);\n }\n\n private _getAvailableWidth(): number {\n const gap = parseFloat(getComputedStyle(this._root).getPropertyValue(\"gap\")) || 0;\n return this.offsetWidth - this._getSplitter().offsetWidth - 2 * gap;\n }\n\n private _getSplitter(): HTMLElement {\n return this._customSplitter || this._defaultSplitter;\n }\n\n private _getMinMaxWidth(slot: HTMLSlotElement): [number, number] {\n const style = getComputedStyle(slot.assignedElements()[0]);\n return [parseFloat(style.minWidth) || 0, parseFloat(style.maxWidth) || Infinity];\n }\n\n private _setRatio(leftWidth: number, rightWidth: number) {\n const sum = leftWidth + rightWidth;\n if (sum === 0) {\n return [0.5, 0.5];\n }\n this.ratio = [leftWidth / sum, rightWidth / sum];\n this.dispatchEvent(new SplitterResizedEvent(this.ratio));\n }\n\n render() {\n if (!this._leftSlotted || !this._rightSlotted) {\n return html`\n <div id=\"root\">\n <slot name=\"left\" @slotchange=${this._onLeftSlotChange} ?hidden=${!this._leftSlotted}></slot>\n <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange} ?hidden=${true}></slot>\n <slot name=\"right\" @slotchange=${this._onRightSlotChange} ?hidden=${!this._rightSlotted}></slot>\n </div>\n `;\n }\n const [leftRatio, rightRatio] = this.ratio;\n const cursor = this._hovering ? getComputedStyle(this).getPropertyValue(\"--sd-splitter-cursor\") : \"inherit\";\n return html`\n <div id=\"root\" style=${styleMap({ cursor })}>\n <div id=\"left\" class=\"pane\" style=${styleMap({ flex: leftRatio + \" \" + leftRatio + \" 0\" })}>\n <slot name=\"left\" @slotchange=${this._onLeftSlotChange}></slot>\n </div>\n <slot name=\"splitter\" @slotchange=${this._onSplitterSlotChange}>\n <div id=\"default-splitter\">\n <div\n id=\"default-splitter-handle\"\n class=${classMap({ hover: this._hovering, drag: this._dragging })}\n >\n <div\n id=\"default-splitter-drag-area\"\n @pointerenter=${this._enterDragArea}\n @pointerleave=${this._leaveDragArea}\n @pointerdown=${this._startDrag}\n ></div>\n </div>\n </div>\n </slot>\n <div id=\"right\" class=\"pane\" style=${styleMap({ flex: rightRatio + \" \" + rightRatio + \" 0\" })}>\n <slot name=\"right\" @slotchange=${this._onRightSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n}\n\nif (!customElements.get(Splitter.ID)) {\n customElements.define(Splitter.ID, Splitter);\n}\n\nexport class SplitterResizedEvent extends Event {\n readonly ratio: [number, number];\n constructor(ratio: [number, number]) {\n super(\"sd-splitter-resized\", { bubbles: true, composed: true });\n this.ratio = ratio;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"sd-splitter\": Splitter;\n }\n interface HTMLElementEventMap {\n \"sd-splitter-resized\": SplitterResizedEvent;\n }\n}\n"],"names":["_Splitter","LitElement","element","dragArea","e","deltaX","slotName","slot","assignment","leftWidth","availableWidth","minLeft","maxLeft","minRight","maxRight","effectiveMinLeft","effectiveMaxLeft","newLeftWidth","newRightWidth","gap","style","rightWidth","sum","SplitterResizedEvent","html","leftRatio","rightRatio","cursor","styleMap","classMap","css","unsafeCSS","Splitter","__decorateClass","property","query","state","ratio"],"mappings":"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"}
package/npm-third-party-licenses.json CHANGED
@@ -1,15 +1,20 @@
1
1
  {
2
- "@cypress/vite-dev-server@5.0.7": {
2
+ "@cypress/vite-dev-server@7.0.0": {
3
3
  "licenses": "MIT",
4
4
  "repository": "https://github.com/cypress-io/cypress",
5
5
  "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
6
6
  },
7
- "@rollup/plugin-node-resolve@15.2.3": {
7
+ "@eslint/js@9.34.0": {
8
+ "licenses": "MIT",
9
+ "repository": "https://github.com/eslint/eslint",
10
+ "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
11
+ },
12
+ "@rollup/plugin-node-resolve@16.0.1": {
8
13
  "licenses": "MIT",
9
14
  "repository": "https://github.com/rollup/plugins",
10
15
  "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
11
16
  },
12
- "@types/node@20.10.6": {
17
+ "@types/node@24.3.0": {
13
18
  "licenses": "MIT",
14
19
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
15
20
  "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
@@ -19,47 +24,42 @@
19
24
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
20
25
  "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
21
26
  },
22
- "@typescript-eslint/eslint-plugin@6.17.0": {
27
+ "@typescript-eslint/eslint-plugin@8.41.0": {
23
28
  "licenses": "MIT",
24
29
  "repository": "https://github.com/typescript-eslint/typescript-eslint",
25
30
  "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
26
31
  },
27
- "@typescript-eslint/parser@6.17.0": {
28
- "licenses": "BSD-2-Clause",
32
+ "@typescript-eslint/parser@8.41.0": {
33
+ "licenses": "MIT",
29
34
  "repository": "https://github.com/typescript-eslint/typescript-eslint",
30
35
  "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
31
36
  },
32
- "@vitest/coverage-v8@1.1.1": {
37
+ "@vitest/coverage-v8@3.2.4": {
33
38
  "licenses": "MIT",
34
39
  "repository": "https://github.com/vitest-dev/vitest",
35
40
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
36
41
  },
37
- "@vitest/ui@1.1.1": {
42
+ "@vitest/ui@3.2.4": {
38
43
  "licenses": "MIT",
39
44
  "repository": "https://github.com/vitest-dev/vitest",
40
45
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
41
46
  },
42
- "axe-core@4.8.3": {
47
+ "axe-core@4.10.3": {
43
48
  "licenses": "MPL-2.0",
44
49
  "repository": "https://github.com/dequelabs/axe-core",
45
50
  "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
46
51
  },
47
- "cypress-axe@1.5.0": {
52
+ "cypress-axe@1.7.0": {
48
53
  "licenses": "MIT",
49
54
  "repository": "https://github.com/component-driven/cypress-axe",
50
55
  "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
51
56
  },
52
- "cypress-real-events@1.13.0": {
53
- "licenses": "MIT",
54
- "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
55
- "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
56
- },
57
- "cypress@13.6.2": {
57
+ "cypress@15.0.0": {
58
58
  "licenses": "MIT",
59
59
  "repository": "https://github.com/cypress-io/cypress",
60
60
  "licenseUrl": "https://cypress.io"
61
61
  },
62
- "esbuild@0.19.11": {
62
+ "esbuild@0.25.9": {
63
63
  "licenses": "MIT",
64
64
  "repository": "https://github.com/evanw/esbuild",
65
65
  "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
@@ -69,57 +69,57 @@
69
69
  "repository": "https://github.com/google/eslint-config-google",
70
70
  "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
71
71
  },
72
- "eslint-config-prettier@9.1.0": {
72
+ "eslint-config-prettier@10.1.8": {
73
73
  "licenses": "MIT",
74
74
  "repository": "https://github.com/prettier/eslint-config-prettier",
75
75
  "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
76
76
  },
77
- "eslint@8.56.0": {
77
+ "eslint@9.34.0": {
78
78
  "licenses": "MIT",
79
79
  "repository": "https://github.com/eslint/eslint",
80
80
  "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
81
81
  },
82
- "github-markdown-css@5.5.0": {
82
+ "github-markdown-css@5.8.1": {
83
83
  "licenses": "MIT",
84
84
  "repository": "https://github.com/sindresorhus/github-markdown-css",
85
85
  "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
86
86
  },
87
- "highlight.js@11.9.0": {
87
+ "highlight.js@11.11.1": {
88
88
  "licenses": "BSD-3-Clause",
89
89
  "repository": "https://github.com/highlightjs/highlight.js",
90
90
  "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
91
91
  },
92
- "junit-report-builder@3.1.0": {
92
+ "junit-report-builder@5.1.1": {
93
93
  "licenses": "MIT",
94
94
  "repository": "https://github.com/davidparsson/junit-report-builder",
95
95
  "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
96
96
  },
97
- "lint-staged@15.2.0": {
97
+ "lint-staged@16.1.5": {
98
98
  "licenses": "MIT",
99
- "repository": "https://github.com/okonet/lint-staged",
100
- "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
99
+ "repository": "https://github.com/lint-staged/lint-staged",
100
+ "licenseUrl": "https://github.com/lint-staged/lint-staged/raw/HEAD/LICENSE"
101
101
  },
102
- "lit@2.8.0": {
102
+ "lit@3.3.1": {
103
103
  "licenses": "BSD-3-Clause",
104
104
  "repository": "https://github.com/lit/lit",
105
105
  "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
106
106
  },
107
- "marked@11.1.1": {
107
+ "marked@16.2.1": {
108
108
  "licenses": "MIT",
109
109
  "repository": "https://github.com/markedjs/marked",
110
110
  "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
111
111
  },
112
- "postcss-prefix-selector@1.16.0": {
112
+ "postcss-prefix-selector@2.1.1": {
113
113
  "licenses": "MIT",
114
114
  "repository": "https://github.com/RadValentin/postcss-prefix-selector",
115
115
  "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
116
116
  },
117
- "postcss@8.4.32": {
117
+ "postcss@8.5.6": {
118
118
  "licenses": "MIT",
119
119
  "repository": "https://github.com/postcss/postcss",
120
120
  "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
121
121
  },
122
- "prettier@3.1.1": {
122
+ "prettier@3.6.2": {
123
123
  "licenses": "MIT",
124
124
  "repository": "https://github.com/prettier/prettier",
125
125
  "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
@@ -129,62 +129,67 @@
129
129
  "repository": "https://github.com/sindresorhus/resolve-pkg",
130
130
  "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
131
131
  },
132
- "sass@1.69.6": {
132
+ "sass@1.91.0": {
133
133
  "licenses": "MIT",
134
134
  "repository": "https://github.com/sass/dart-sass",
135
135
  "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
136
136
  },
137
- "stylelint-config-recommended-scss@14.0.0": {
137
+ "stylelint-config-recommended-scss@16.0.0": {
138
138
  "licenses": "MIT",
139
139
  "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
140
140
  "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
141
141
  },
142
- "stylelint-config-standard@36.0.0": {
142
+ "stylelint-config-standard@39.0.0": {
143
143
  "licenses": "MIT",
144
144
  "repository": "https://github.com/stylelint/stylelint-config-standard",
145
145
  "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
146
146
  },
147
- "stylelint-scss@6.0.0": {
147
+ "stylelint-scss@6.12.1": {
148
148
  "licenses": "MIT",
149
149
  "repository": "https://github.com/stylelint-scss/stylelint-scss",
150
150
  "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
151
151
  },
152
- "stylelint@16.1.0": {
152
+ "stylelint@16.23.1": {
153
153
  "licenses": "MIT",
154
154
  "repository": "https://github.com/stylelint/stylelint",
155
155
  "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
156
156
  },
157
- "tsup@8.0.1": {
157
+ "tsup@8.5.0": {
158
158
  "licenses": "MIT",
159
159
  "repository": "https://github.com/egoist/tsup",
160
160
  "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
161
161
  },
162
- "turbo@1.11.2": {
163
- "licenses": "MPL-2.0",
164
- "repository": "https://github.com/vercel/turbo",
165
- "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
162
+ "turbo@2.5.6": {
163
+ "licenses": "MIT",
164
+ "repository": "https://github.com/vercel/turborepo",
165
+ "licenseUrl": "https://github.com/vercel/turborepo/raw/HEAD/LICENSE"
166
+ },
167
+ "typescript-eslint@8.41.0": {
168
+ "licenses": "MIT",
169
+ "repository": "https://github.com/typescript-eslint/typescript-eslint",
170
+ "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
166
171
  },
167
- "typescript@5.3.3": {
172
+ "typescript@5.9.2": {
168
173
  "licenses": "Apache-2.0",
169
- "repository": "https://github.com/Microsoft/TypeScript",
170
- "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
174
+ "repository": "https://github.com/microsoft/TypeScript",
175
+ "licenseUrl": "https://github.com/microsoft/TypeScript/raw/HEAD/LICENSE.txt"
171
176
  },
172
- "vite-tsconfig-paths@4.2.3": {
177
+ "vite-tsconfig-paths@5.1.4": {
173
178
  "licenses": "MIT",
174
179
  "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
175
180
  "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
176
181
  },
177
- "vite@5.0.10": {
182
+ "vite@7.1.3": {
178
183
  "licenses": "MIT",
179
184
  "repository": "https://github.com/vitejs/vite",
180
185
  "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
181
186
  },
182
- "vitest@1.1.1": {
187
+ "vitest@3.2.4": {
183
188
  "licenses": "MIT",
184
189
  "repository": "https://github.com/vitest-dev/vitest",
185
190
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
186
191
  },
187
- "yargs@17.7.2": {
192
+ "yargs@18.0.0": {
188
193
  "licenses": "MIT",
189
194
  "repository": "https://github.com/yargs/yargs",
190
195
  "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/splitter",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "A draggable splitter layout for displaying two panels side by side",
5
5
  "main": "dist/splitter-with-externals.js",
6
6
  "module": "dist/splitter.mjs",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "types": "dist/splitter.d.ts",
9
9
  "dependencies": {
10
- "lit": "^2.8.0"
10
+ "lit": "^3.3.1"
11
11
  },
12
12
  "devDependencies": {
13
- "@cas-smartdesign/license-generator": "^1.6.3",
14
- "@cas-smartdesign/element-preview": "^0.2.2"
13
+ "@cas-smartdesign/license-generator": "^1.7.0",
14
+ "@cas-smartdesign/element-preview": "^0.3.0"
15
15
  },
16
16
  "files": [
17
17
  "dist",