@ixfx/components 0.15.1 → 0.15.2
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.
- package/bundle/index.d.ts +10 -0
- package/bundle/index.js +23 -7
- package/dist/index.d.ts +5 -0
- package/dist/index.js +11 -1
- package/dist/panel.d.ts +5 -0
- package/dist/panel.js +25 -1
- package/dist/titlebar.js +0 -2
- package/docs-user/index.json +2 -2
- package/docs-user/panel.md +21 -0
- package/package.json +1 -1
package/bundle/index.d.ts
CHANGED
|
@@ -8075,6 +8075,11 @@ declare class PanelElement extends LitElement {
|
|
|
8075
8075
|
hideTitlebar: boolean;
|
|
8076
8076
|
/** Keep the toolbar visible even when the panel is collapsed. */
|
|
8077
8077
|
keepToolbar: boolean;
|
|
8078
|
+
/**
|
|
8079
|
+
* Keep the titlebar pinned to the edge of the nearest scrolling ancestor while this panel
|
|
8080
|
+
* is in view (top for horizontal titlebars, left for vertical). Normally set by `ixfx-panel-group`.
|
|
8081
|
+
*/
|
|
8082
|
+
stickyHeader: boolean;
|
|
8078
8083
|
private _onTitlebarToggle;
|
|
8079
8084
|
private _onCloseClick;
|
|
8080
8085
|
protected render(): import("lit").TemplateResult<1>;
|
|
@@ -10497,6 +10502,11 @@ declare class PanelGroupElement extends LitElement {
|
|
|
10497
10502
|
collapsible: boolean;
|
|
10498
10503
|
accordion: boolean;
|
|
10499
10504
|
allowReorder: boolean;
|
|
10505
|
+
/**
|
|
10506
|
+
* Pin each panel's titlebar to the top (or left, for vertical titlebars) of the scroll area
|
|
10507
|
+
* while its content is in view. On by default; set `sticky-headers="false"` to disable.
|
|
10508
|
+
*/
|
|
10509
|
+
stickyHeaders: boolean;
|
|
10500
10510
|
/** Explicit gap between panels. When unset, `--group-gap` (falling back to `--space-l`) controls the gap. */
|
|
10501
10511
|
gap?: string;
|
|
10502
10512
|
private _panels;
|
package/bundle/index.js
CHANGED
|
@@ -1703,7 +1703,6 @@ const Me={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
|
|
|
1703
1703
|
|
|
1704
1704
|
.title-text {
|
|
1705
1705
|
flex: 1;
|
|
1706
|
-
padding-left: 1ch;
|
|
1707
1706
|
font-family: var(--font-family);
|
|
1708
1707
|
font-size: var(--text-m);
|
|
1709
1708
|
font-weight: var(--font-weight-bold, 600);
|
|
@@ -1721,7 +1720,6 @@ const Me={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
|
|
|
1721
1720
|
|
|
1722
1721
|
:host([orientation="vertical"]) .title-text {
|
|
1723
1722
|
writing-mode: vertical-rl;
|
|
1724
|
-
padding-left: 0;
|
|
1725
1723
|
padding-bottom: 1ch;
|
|
1726
1724
|
text-orientation: mixed;
|
|
1727
1725
|
transform: rotate(180deg);
|
|
@@ -7931,7 +7929,7 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
7931
7929
|
</div>
|
|
7932
7930
|
${h?this.#Ee(m,b,c):``}
|
|
7933
7931
|
</div>
|
|
7934
|
-
`}#Ne;#Pe;#Fe(e){this.#v||this.tickled.handlePointerEnter(e)}#Ie(){!this.disableScrollHoverTickle||this.#v||(this.#v=!0,this.toggleAttribute(`data-scroll-hover-suppress`,!0))}#Le(){this.#v&&(this.#v=!1,this.toggleAttribute(`data-scroll-hover-suppress`,!1))}#Re;#ze;#Be(){this.#i!==0&&(cancelAnimationFrame(this.#i),this.#i=0)}#Ve(){this.#a!==0&&(clearTimeout(this.#a),this.#a=0)}#He(){!this.snapToItem||this.orientation!==`row`&&this.orientation!==`column`||(this.#Ve(),this.#a=window.setTimeout(()=>{this.#a=0,this.#Ue()},120))}#Ue(){let e=this.#e.value;if(!e)return;let n=this.#de(),r=n.horizontal,i=r?e.scrollLeft:e.scrollTop,a=r?this._viewportWidth:this._viewportHeight,o=Math.max(0,n.totalExtent-a),s=Math.min(o,Math.max(0,n.snapTarget(i)));Math.abs(s-i)<.5||e.scrollTo(r?{left:s,behavior:`smooth`}:{top:s,behavior:`smooth`})}#We(e,n){this.#A.isDragging||this.#C||this.#E.isDragging||this.#T!==0||(this.selection.handleClick(n,e),this.#_e(`list-item-click`,n))}#Ge(e){let n=this.interactionMode;if(n!==`manual`&&(this.selectionMode!==`none`||n===`checked`||n===`sticky`)&&!(this.#A.isDragging||this.#C||this.#E.isDragging||this.#T!==0)){for(let n of e.composedPath())if(n instanceof Element&&(n.classList.contains(`cell`)||n.classList.contains(`group-header`)))return;this.selection.clear()}}#Ke(){this.#T&&clearTimeout(this.#T),this.#T=window.setTimeout(()=>{this.#T=0},0)}#qe(){this.#C=!1,this.#w=void 0,this.toggleAttribute(`data-native-dragging`,!1),this.removeAttribute(`aria-label`)}#Je(e){this.interactionMode!==`manual`&&this.selection.replace(e),this.#_e(`list-activate`,e)}};T([d({type:String,attribute:`selection-mode`})],K.prototype,`selectionMode`,void 0),T([d({type:String,attribute:`interaction-mode`})],K.prototype,`interactionMode`,void 0),T([d({type:Boolean,attribute:`disable-hover-tickle`,reflect:!0})],K.prototype,`disableHoverTickle`,void 0),T([d({type:Boolean,attribute:`disable-scroll-hover-tickle`,reflect:!0})],K.prototype,`disableScrollHoverTickle`,void 0),T([d({type:Number,attribute:`item-size`})],K.prototype,`itemSize`,void 0),T([d({type:Number})],K.prototype,`gap`,void 0),T([d({type:String,reflect:!0})],K.prototype,`orientation`,void 0),T([d({type:String,attribute:`caption-style`,reflect:!0})],K.prototype,`captionStyle`,void 0),T([d({type:String,attribute:`caption-align`,reflect:!0})],K.prototype,`captionAlign`,void 0),T([d({type:String,attribute:`caption-position`,reflect:!0})],K.prototype,`captionPosition`,void 0),T([d({type:String,attribute:`caption-backdrop`,reflect:!0})],K.prototype,`captionBackdrop`,void 0),T([d({type:Number,attribute:`caption-height`})],K.prototype,`captionHeight`,void 0),T([d({type:String,attribute:`item-wrap`})],K.prototype,`itemWrap`,void 0),T([d({attribute:!1})],K.prototype,`filterPredicate`,void 0),T([d({attribute:!1})],K.prototype,`itemFilterPredicate`,void 0),T([d({type:Boolean,attribute:`items-draggable`,reflect:!0})],K.prototype,`itemsDraggable`,void 0),T([d({type:Boolean,attribute:`marquee-from-cell-blank`,reflect:!0})],K.prototype,`marqueeFromCellBlank`,void 0),T([d({attribute:!1})],K.prototype,`dragPreviewRenderer`,void 0),T([d({attribute:!1})],K.prototype,`dragPreviewSource`,void 0),T([d({type:String,attribute:`search-modes`,reflect:!0})],K.prototype,`searchModes`,void 0),T([d({type:Boolean,attribute:`snap-to-item`,reflect:!0})],K.prototype,`snapToItem`,void 0),T([d({attribute:!1})],K.prototype,`items`,void 0),T([d({attribute:!1})],K.prototype,`itemAdapter`,void 0),T([d({attribute:`group-by`})],K.prototype,`groupBy`,void 0),T([d({attribute:!1})],K.prototype,`groupLabel`,void 0),T([d({type:Boolean,attribute:`cross-group-selection`,reflect:!0})],K.prototype,`crossGroupSelection`,void 0),T([d({type:Number,attribute:`group-header-height`})],K.prototype,`groupHeaderHeight`,void 0),T([d({type:Number,attribute:`group-header-width`})],K.prototype,`groupHeaderWidth`,void 0),T([m()],K.prototype,`_collapsedGroups`,void 0),T([m()],K.prototype,`_scrollTop`,void 0),T([m()],K.prototype,`_scrollLeft`,void 0),T([m()],K.prototype,`_viewportHeight`,void 0),T([m()],K.prototype,`_viewportWidth`,void 0),K=T([w(`ixfx-grid-list`)],K);let Eb=class extends n{constructor(...e){super(...e),this.collapsed=!1,this.orientation=`horizontal`,this.closable=!1,this.collapsible=!0,this.title=``,this.iconName=``,this.toggleInteraction=`implicit`,this.variant=`titlebar`,this.hideTitlebar=!1,this.keepToolbar=!1}_onTitlebarToggle(e){e.stopPropagation(),this.collapsed=e.detail.collapsed,this.dispatchEvent(new CustomEvent(`toggle`,{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0}))}_onCloseClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0})),this.remove()}render(){let e=this.keepToolbar||!this.collapsed;return i`
|
|
7932
|
+
`}#Ne;#Pe;#Fe(e){this.#v||this.tickled.handlePointerEnter(e)}#Ie(){!this.disableScrollHoverTickle||this.#v||(this.#v=!0,this.toggleAttribute(`data-scroll-hover-suppress`,!0))}#Le(){this.#v&&(this.#v=!1,this.toggleAttribute(`data-scroll-hover-suppress`,!1))}#Re;#ze;#Be(){this.#i!==0&&(cancelAnimationFrame(this.#i),this.#i=0)}#Ve(){this.#a!==0&&(clearTimeout(this.#a),this.#a=0)}#He(){!this.snapToItem||this.orientation!==`row`&&this.orientation!==`column`||(this.#Ve(),this.#a=window.setTimeout(()=>{this.#a=0,this.#Ue()},120))}#Ue(){let e=this.#e.value;if(!e)return;let n=this.#de(),r=n.horizontal,i=r?e.scrollLeft:e.scrollTop,a=r?this._viewportWidth:this._viewportHeight,o=Math.max(0,n.totalExtent-a),s=Math.min(o,Math.max(0,n.snapTarget(i)));Math.abs(s-i)<.5||e.scrollTo(r?{left:s,behavior:`smooth`}:{top:s,behavior:`smooth`})}#We(e,n){this.#A.isDragging||this.#C||this.#E.isDragging||this.#T!==0||(this.selection.handleClick(n,e),this.#_e(`list-item-click`,n))}#Ge(e){let n=this.interactionMode;if(n!==`manual`&&(this.selectionMode!==`none`||n===`checked`||n===`sticky`)&&!(this.#A.isDragging||this.#C||this.#E.isDragging||this.#T!==0)){for(let n of e.composedPath())if(n instanceof Element&&(n.classList.contains(`cell`)||n.classList.contains(`group-header`)))return;this.selection.clear()}}#Ke(){this.#T&&clearTimeout(this.#T),this.#T=window.setTimeout(()=>{this.#T=0},0)}#qe(){this.#C=!1,this.#w=void 0,this.toggleAttribute(`data-native-dragging`,!1),this.removeAttribute(`aria-label`)}#Je(e){this.interactionMode!==`manual`&&this.selection.replace(e),this.#_e(`list-activate`,e)}};T([d({type:String,attribute:`selection-mode`})],K.prototype,`selectionMode`,void 0),T([d({type:String,attribute:`interaction-mode`})],K.prototype,`interactionMode`,void 0),T([d({type:Boolean,attribute:`disable-hover-tickle`,reflect:!0})],K.prototype,`disableHoverTickle`,void 0),T([d({type:Boolean,attribute:`disable-scroll-hover-tickle`,reflect:!0})],K.prototype,`disableScrollHoverTickle`,void 0),T([d({type:Number,attribute:`item-size`})],K.prototype,`itemSize`,void 0),T([d({type:Number})],K.prototype,`gap`,void 0),T([d({type:String,reflect:!0})],K.prototype,`orientation`,void 0),T([d({type:String,attribute:`caption-style`,reflect:!0})],K.prototype,`captionStyle`,void 0),T([d({type:String,attribute:`caption-align`,reflect:!0})],K.prototype,`captionAlign`,void 0),T([d({type:String,attribute:`caption-position`,reflect:!0})],K.prototype,`captionPosition`,void 0),T([d({type:String,attribute:`caption-backdrop`,reflect:!0})],K.prototype,`captionBackdrop`,void 0),T([d({type:Number,attribute:`caption-height`})],K.prototype,`captionHeight`,void 0),T([d({type:String,attribute:`item-wrap`})],K.prototype,`itemWrap`,void 0),T([d({attribute:!1})],K.prototype,`filterPredicate`,void 0),T([d({attribute:!1})],K.prototype,`itemFilterPredicate`,void 0),T([d({type:Boolean,attribute:`items-draggable`,reflect:!0})],K.prototype,`itemsDraggable`,void 0),T([d({type:Boolean,attribute:`marquee-from-cell-blank`,reflect:!0})],K.prototype,`marqueeFromCellBlank`,void 0),T([d({attribute:!1})],K.prototype,`dragPreviewRenderer`,void 0),T([d({attribute:!1})],K.prototype,`dragPreviewSource`,void 0),T([d({type:String,attribute:`search-modes`,reflect:!0})],K.prototype,`searchModes`,void 0),T([d({type:Boolean,attribute:`snap-to-item`,reflect:!0})],K.prototype,`snapToItem`,void 0),T([d({attribute:!1})],K.prototype,`items`,void 0),T([d({attribute:!1})],K.prototype,`itemAdapter`,void 0),T([d({attribute:`group-by`})],K.prototype,`groupBy`,void 0),T([d({attribute:!1})],K.prototype,`groupLabel`,void 0),T([d({type:Boolean,attribute:`cross-group-selection`,reflect:!0})],K.prototype,`crossGroupSelection`,void 0),T([d({type:Number,attribute:`group-header-height`})],K.prototype,`groupHeaderHeight`,void 0),T([d({type:Number,attribute:`group-header-width`})],K.prototype,`groupHeaderWidth`,void 0),T([m()],K.prototype,`_collapsedGroups`,void 0),T([m()],K.prototype,`_scrollTop`,void 0),T([m()],K.prototype,`_scrollLeft`,void 0),T([m()],K.prototype,`_viewportHeight`,void 0),T([m()],K.prototype,`_viewportWidth`,void 0),K=T([w(`ixfx-grid-list`)],K);let Eb=class extends n{constructor(...e){super(...e),this.collapsed=!1,this.orientation=`horizontal`,this.closable=!1,this.collapsible=!0,this.title=``,this.iconName=``,this.toggleInteraction=`implicit`,this.variant=`titlebar`,this.hideTitlebar=!1,this.keepToolbar=!1,this.stickyHeader=!1}_onTitlebarToggle(e){e.stopPropagation(),this.collapsed=e.detail.collapsed,this.dispatchEvent(new CustomEvent(`toggle`,{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0}))}_onCloseClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0})),this.remove()}render(){let e=this.keepToolbar||!this.collapsed;return i`
|
|
7935
7933
|
${this.hideTitlebar?a:i`
|
|
7936
7934
|
<ixfx-titlebar
|
|
7937
7935
|
.title=${this.title}
|
|
@@ -7976,6 +7974,23 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
7976
7974
|
flex-shrink: 0;
|
|
7977
7975
|
}
|
|
7978
7976
|
|
|
7977
|
+
/* \`overflow: clip\` (unlike \`hidden\`) does not create a scroll container, so the
|
|
7978
|
+
titlebar can stick to the outer scroll area. Sticking is bounded by the panel itself. */
|
|
7979
|
+
:host([sticky-header]) {
|
|
7980
|
+
overflow: clip;
|
|
7981
|
+
}
|
|
7982
|
+
|
|
7983
|
+
:host([sticky-header]) ixfx-titlebar {
|
|
7984
|
+
position: sticky;
|
|
7985
|
+
top: 0;
|
|
7986
|
+
z-index: 2;
|
|
7987
|
+
}
|
|
7988
|
+
|
|
7989
|
+
:host([sticky-header][orientation="vertical"]) ixfx-titlebar {
|
|
7990
|
+
top: auto;
|
|
7991
|
+
left: 0;
|
|
7992
|
+
}
|
|
7993
|
+
|
|
7979
7994
|
.content-wrapper {
|
|
7980
7995
|
interpolate-size: allow-keywords;
|
|
7981
7996
|
overflow: hidden;
|
|
@@ -7999,7 +8014,8 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
7999
8014
|
}
|
|
8000
8015
|
|
|
8001
8016
|
.content-inner {
|
|
8002
|
-
box-shadow: var(--deboss-3);
|
|
8017
|
+
box-shadow: var(--panel-content-shadow, var(--deboss-3));
|
|
8018
|
+
border: var(--panel-content-border, none);
|
|
8003
8019
|
min-height: 0;
|
|
8004
8020
|
min-width: 0;
|
|
8005
8021
|
overflow: hidden;
|
|
@@ -8066,7 +8082,7 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
8066
8082
|
height: 100%;
|
|
8067
8083
|
transform: none;
|
|
8068
8084
|
}
|
|
8069
|
-
`]}};T([d({type:Boolean,reflect:!0})],Eb.prototype,`collapsed`,void 0),T([d({type:String,attribute:`orientation`,reflect:!0})],Eb.prototype,`orientation`,void 0),T([d({type:Boolean})],Eb.prototype,`closable`,void 0),T([d({type:Boolean,reflect:!0})],Eb.prototype,`collapsible`,void 0),T([d({type:String})],Eb.prototype,`title`,void 0),T([d({type:String,attribute:`icon-name`})],Eb.prototype,`iconName`,void 0),T([d({type:String,attribute:`toggle-interaction`})],Eb.prototype,`toggleInteraction`,void 0),T([d({type:String,attribute:`variant`,reflect:!0})],Eb.prototype,`variant`,void 0),T([d({type:Boolean,attribute:`hide-titlebar`})],Eb.prototype,`hideTitlebar`,void 0),T([d({type:Boolean,attribute:`keep-toolbar`})],Eb.prototype,`keepToolbar`,void 0),Eb=T([w(`ixfx-panel`)],Eb);const Db=`__ungrouped__`;let Ob=class extends n{constructor(...e){super(...e),this.grouped=!1,this.crossGroupSelection=!1,this.#n=new Map,this.#i=!1,this.#a=new je(this),this.#d=e=>{if(this.#i)return;let n=e.target,r;for(let[e,i]of this.#n)if(i===n){r=e;break}if(r!==void 0){if(this.grouped&&!this.crossGroupSelection){this.#i=!0;for(let[e,n]of this.#n)e!==r&&n.clearSelection();this.#i=!1}this.dispatchEvent(new CustomEvent(`grouped-select`,{detail:{selected:this.selectedItems,groupKey:r===Db?void 0:r},bubbles:!0,composed:!0}))}}}#e;#t;#n;#r;#i;#a;get groupBy(){return this.#e}set groupBy(e){this.#e=e,this.requestUpdate()}get factory(){return this.#t}set factory(e){e!==this.#t&&(this.#s(),this.#t=e,this.requestUpdate())}get provider(){return this.#a.provider}set provider(e){this.#a.provider=e,e&&this.#a.request(void 0)}get selectedItems(){let e=new Set;for(let n of this.#n.values())for(let r of n.selectedItems)e.add(r);return e}dispatch(e,n){for(let r of this.#n.values())r.dispatch(e,n)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.addEventListener(`select`,this.#d)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`select`,this.#d)}updated(e){super.updated(e),e.has(`grouped`)&&this.#s(),this.#c()}render(){return this.#t?this.grouped?this.#e?(this.#r=this.#o(),i`${_(this.#r.keys(),e=>e,e=>i`<ixfx-panel data-group-key=${e} .title=${e}></ixfx-panel>`)}`):a:i`<div class="ungrouped-host"></div>`:a}#o(){let e=new Map;if(!this.#e)return e;for(let n of this.#a.items){let r=this.#e(n),i=e.get(r);i||(i=[],e.set(r,i)),i.push(n)}return e}#s(){for(let e of this.#n.values())e.remove();this.#n.clear()}#c(){if(this.#t){if(!this.grouped){this.#l();return}this.#e&&this.#u()}}#l(){let e=this.querySelector(`.ungrouped-host`);if(!e)return;let n=this.#n.get(Db);n||(n=this.#t(void 0),e.appendChild(n),this.#n.set(Db,n)),n.setItems(this.#a.items)}#u(){let e=this.#r??this.#o();for(let n of[...this.#n.keys()])e.has(n)||(this.#n.get(n)?.remove(),this.#n.delete(n));for(let[n,r]of e){let e=[...this.children].find(e=>e instanceof HTMLElement&&e.dataset.groupKey===n);if(!e)continue;let i=this.#n.get(n);i||(i=this.#t(n),e.appendChild(i),this.#n.set(n,i)),i.setItems(r)}}#d};T([d({type:Boolean,reflect:!0})],Ob.prototype,`grouped`,void 0),T([d({type:Boolean,attribute:`cross-group-selection`,reflect:!0})],Ob.prototype,`crossGroupSelection`,void 0),Ob=T([w(`ixfx-grouped-item-lister`)],Ob);const kb=`application/x-ixfx-tree`,Ab=new Map,jb=new Map;let Mb,Nb=0;function Pb(){return`tree-drag-${++Nb}-${Date.now()}`}function Fb(e,n,r,i){Ab.set(e,{sourceId:e,nodes:r,keys:i}),jb.set(e,new WeakRef(n)),Mb=e}function Ib(e){Ab.delete(e),jb.delete(e),Mb===e&&(Mb=void 0)}function Lb(){if(Mb===void 0)return;let e=Ab.get(Mb);if(e)return{sourceId:Mb,keys:e.keys,nodes:e.nodes,element:jb.get(Mb)?.deref()}}const Rb={direction:0,depth:0};function zb(e){return Math.min(e/2,Math.max(24,Math.min(64,e*.2)))}function Bb(e,n){if(n<=0)return Rb;let r=zb(n);return e<r?{direction:-1,depth:Math.min(1,(r-e)/r)}:e>n-r?{direction:1,depth:Math.min(1,(e-(n-r))/r)}:Rb}function Vb(e,n){let r=Math.min(1,Math.max(0,n)/2500);return(120+3080*r*r)*(.35+.65*Math.min(1,Math.max(0,e)))}function Hb(e,n,r){return Math.max(n,Math.min(r,e))}var Ub=class{#e;#t;#n=!1;#r;#i=`internal`;#a=[];#o=[];#s;#c;#l=0;#u=0;#d=0;#f=0;#p=0;#m=0;#h=0;#g;#_=!1;#v;constructor(e,n){this.#e=e,this.#t=n,e.addController(this)}get isDragging(){return this.#n}get isRejected(){return this.#n&&this.#r===void 0}get dropState(){return this.#r}hostConnected(){this.#y()}hostUpdated(){this.#y()}#y(){let e=this.#t.getScrollContainer();!e||e===this.#v||(this.#b(),this.#v=e,e.addEventListener(`dragenter`,this.#x),e.addEventListener(`dragover`,this.#S),e.addEventListener(`dragleave`,this.#w),e.addEventListener(`drop`,this.#T))}#b(){let e=this.#v;e&&(e.removeEventListener(`dragenter`,this.#x),e.removeEventListener(`dragover`,this.#S),e.removeEventListener(`dragleave`,this.#w),e.removeEventListener(`drop`,this.#T),this.#v=void 0)}hostDisconnected(){this.#b(),this.#A(),this.#N(),this.#n=!1,this.#r=void 0}#x=e=>{this.#t.getDndMode()===`none`||!e.dataTransfer||this.#t.resolveDrag(e.dataTransfer,`hover`)!==void 0&&(e.preventDefault(),this.#n||(this.#n=!0,this.#t.onActiveChange(!0)))};#S=e=>{if(this.#t.getDndMode()===`none`||!e.dataTransfer)return;this.#u=e.clientX,this.#d=e.clientY,this.#g=e;let n=this.#t.resolveDrag(e.dataTransfer,`hover`);if(!n){this.#C(e);return}this.#n||(this.#n=!0,this.#t.onActiveChange(!0)),this.#i=n.source,this.#a=n.keys,this.#o=n.nodes;let r=this.#t.getVisibleRows();this.#k(this.#D(r,e.clientY)),this.#j();let i=this.#O(e,r,n.source);if(!i){this.#C(e,!1);return}let a={source:n.source,dragged:n.nodes.length>0?n.nodes:void 0,draggedKeys:n.keys,target:i,dataTransfer:e.dataTransfer};if(!this.#t.vet(a)){this.#C(e,!1);return}e.preventDefault(),e.dataTransfer.dropEffect=n.source===`internal`?`move`:`copy`,this.#P(i)};#C(e,n=!0){e.dataTransfer&&(e.dataTransfer.dropEffect=`none`),this.#P(void 0),n&&this.#A()}#w=e=>{let n=this.#t.getScrollContainer(),r=e.relatedTarget;n&&r&&n.contains(r)||this.#E()};#T=e=>{if(!e.dataTransfer){this.#E();return}e.preventDefault(),this.#N(),this.#A();let n=e=>{this.#r=void 0,this.#n=!1,this.#t.onDropStateChange(void 0),this.#t.onActiveChange(!1),this.#t.onDragEnd(e)};if(this.#t.getDndMode()===`none`){n(!1);return}let r=this.#t.resolveDrag(e.dataTransfer,`drop`);if(!r){n(!1);return}this.#a=r.keys,this.#o=r.nodes;let i=this.#O(e,this.#t.getVisibleRows(),r.source);if(!i){n(!1);return}let a={source:r.source,dragged:r.nodes.length>0?r.nodes:void 0,draggedKeys:r.keys,target:i,dataTransfer:e.dataTransfer};if(!this.#t.vet(a)){n(!1);return}let o={...a,external:r.source===`external`?r.nodes:void 0};n(this.#t.commitDrop(o))};#E(){this.#A(),this.#N(),this.#r!==void 0&&(this.#r=void 0,this.#t.onDropStateChange(void 0)),this.#n&&(this.#n=!1,this.#t.onActiveChange(!1))}#D(e,n){if(e.length!==0)return n<e[0].rect.top?e[0]:n>e[e.length-1].rect.bottom?e[e.length-1]:e.find(e=>n>=e.rect.top&&n<=e.rect.bottom)??e[e.length-1]}#O(e,n,r){if(n.length===0)return;let i=this.#D(n,e.clientY);if(!i)return;let a=Hb((e.clientY-i.rect.top)/i.rect.height,0,1),o=a<.25?`before`:a>.75?`after`:`inside`,s=i.node.item.isLeaf===!0;o===`inside`&&s&&(o=`after`);let c=!1;o===`after`&&!s&&this.#t.isExpanded(i.key)&&(o=`inside`,c=!0);let l,u,d,f;if(o===`inside`)l=i.key,u=i.key,d=i.depth+1,f=c?0:i.node.children?.length??0;else{let r=this.#t.getIndentPx()||1,a=n[0].rect.left,s=Hb(Math.round((e.clientX-a)/r),0,i.depth),c={node:i.node,depth:i.depth,parentKey:this.#t.getRowInfo(i.key)?.parentKey};u=i.key;for(let e=i.depth-s;e>0&&c.parentKey!==void 0;e--){let e=this.#t.getRowInfo(c.parentKey);if(!e)break;u=c.parentKey,c=e}d=c.depth,l=c.parentKey;let p=this.#t.getChildren(l).findIndex(e=>e.item.key===u);f=(p<0?0:p)+ +(o===`after`)}if(r===`internal`){for(let e of this.#a)if(e===l||e===u||l!==void 0&&this.#t.isSelfOrDescendant(e,l)||o!==`inside`&&this.#t.isSelfOrDescendant(e,u))return;if(this.#a.length>0&&!this.#t.isReorderAllowed()&&!this.#a.some(e=>this.#t.getParentKey(e)!==l))return}return{parentKey:l,index:f,referenceKey:u,position:o,depth:d}}#k(e){if(!e||e.node.item.isLeaf===!0||this.#t.isExpanded(e.key)){this.#A();return}if(e.key===this.#c)return;this.#A();let n=this.#c=e.key;this.#s=setTimeout(()=>{this.#s=void 0,this.#c===n&&(this.#c=void 0,this.#t.expandKey(n))},Math.max(0,this.#t.getExpandHoverMs()))}#A(){this.#s!==void 0&&(clearTimeout(this.#s),this.#s=void 0),this.#c=void 0}#j(){this.#l===0&&(this.#l=requestAnimationFrame(this.#M))}#M=e=>{if(this.#l=0,!this.#n)return;let n=this.#t.getScrollContainer();if(!n||this.#_&&this.#g&&(this.#_=!1,this.#S(this.#g),!this.#n))return;let r=n.getBoundingClientRect(),i=this.#u>=r.left&&this.#u<=r.right?Bb(this.#d-r.top,r.height):{direction:0,depth:0};if(i.direction!==this.#f&&(this.#f=i.direction,this.#p=e,this.#m=e,this.#h=0),i.direction===0)return;let a=Math.min(50,Math.max(0,e-this.#m));this.#m=e;let o=Vb(i.depth,e-this.#p),s=i.direction*o*a/1e3+this.#h,c=Math.trunc(s);if(this.#h=s-c,c!==0){let e=n.scrollTop;n.scrollTop=e+c,n.scrollTop!==e&&(this.#_=!0)}this.#j()};#N(){this.#l!==0&&(cancelAnimationFrame(this.#l),this.#l=0),this.#f=0,this.#h=0,this.#_=!1,this.#g=void 0}#P(e){let n=e===void 0?this.#r===void 0:e.referenceKey===this.#r?.referenceKey&&e.position===this.#r?.position&&e.depth===this.#r?.depth&&e.index===this.#r?.index;this.#r=e,(!n||this.#n)&&this.#t.onDropStateChange(e)}};function Wb(e,n){let r=[],i=new Map,a=[],o=(e,r,i)=>{if(!e||e.length===0)return;let o=e.filter(e=>n.isShown(e,r));for(let e=o.length-1;e>=0;e--)a.push({node:o[e],depth:r,parentKey:i,posInSet:e+1,setSize:o.length})};for(o(e.children,0,void 0);a.length>0;){let{node:e,depth:s,parentKey:c,posInSet:l,setSize:u}=a.pop();i.set(e.item.key,r.length),r.push({node:e,depth:s,parentKey:c,posInSet:l,setSize:u}),e.children&&e.children.length>0&&n.isExpanded(e,s)&&o(e.children,s+1,e.item.key)}return{rows:r,indexByKey:i}}function Gb(e){let n=new Map,r=new Set,i=new Set([e.item.key]),a=new Set,o=[];if(e.children)for(let r of e.children)n.set(r.item.key,e.item.key),o.push({node:r,depth:0,parentKey:e.item.key});for(;o.length>0;){let{node:e,depth:s,parentKey:c}=o.pop();if(i.has(e.item.key)&&a.add(e.item.key),i.add(e.item.key),n.set(e.item.key,c),e.item.icon&&r.add(s),e.children)for(let n=e.children.length-1;n>=0;n--){let r=e.children[n];o.push({node:r,depth:s+1,parentKey:e.item.key})}}if(a.size>0){let e=[...a].slice(0,5).map(e=>`"${e}"`).join(`, `);console.warn(`[ixfx-tree] ${a.size} duplicate item key(s) in tree (e.g. ${e}). Keys must be unique across the whole tree; duplicates break checkbox state, expansion and selection.`)}return{parentByKey:n,depthsWithIcons:r}}function Kb(e,n){let r=new Set;if(!e.children)return r;let i=[],a=(e,r)=>{i.push({node:e,depth:r,next:0,matched:n(e,r)})};for(let n of e.children)for(a(n,0);i.length>0;){let e=i[i.length-1],n=e.node.children;if(n&&e.next<n.length){a(n[e.next++],e.depth+1);continue}i.pop(),e.matched&&(r.add(e.node.item.key),i.length>0&&(i[i.length-1].matched=!0))}return r}function qb(e,n,r){if(r.size===0)return[...e];let i=new Set;for(let n of e)i.add(n.node.item.key);let a=Symbol(`end`),o=new Map,s=a;for(let e=n.length-1;e>=0;e--){let a=n[e];if(i.has(a)){s=a;continue}let c=r.get(a);if(!c)continue;let l=o.get(s);l?l.push(c):o.set(s,[c])}let c=[];for(let n of e){let e=o.get(n.node.item.key);if(e)for(let n=e.length-1;n>=0;n--)c.push(e[n]);c.push(n)}let l=o.get(a);if(l)for(let e=l.length-1;e>=0;e--)c.push(l[e]);return c}function Jb(e,n){let r=new Map;if(!e.children)return r;let i=[];for(let a of e.children)for(i.push({node:a,next:0,checked:0,unchecked:0,counted:0});i.length>0;){let e=i[i.length-1],{node:a}=e,o=a.children,s=a.item.isLeaf||!o?.length;if(!s&&e.next<o.length){i.push({node:o[e.next++],next:0,checked:0,unchecked:0,counted:0});continue}i.pop();let c;c=s?n.has(a)?`checked`:`unchecked`:e.counted===0?`unchecked`:e.checked===e.counted?`checked`:e.unchecked===e.counted?`unchecked`:`indeterminate`,r.set(a.item.key,c);let l=s&&a.item.selectable===!1;if(i.length>0&&!l){let e=i[i.length-1];e.counted++,c===`checked`?e.checked++:c===`unchecked`&&e.unchecked++}}return r}function Yb(e,n){if(e.has(n))return e;let r=new Set(e);return r.add(n),r}function Xb(e,n){if(!e.has(n))return e;let r=new Set(e);return r.delete(n),r}function Zb(e,n){let r;for(let i of e)n(i)&&(r??=new Set(e),r.delete(i));return r??e}function Qb(e){return Math.max(1,e.rowHeight+e.gap)}function $b(e,n){return e.listOffset+n*Qb(e)+e.gap}function ex(e,n){return $b(e,n)+e.rowHeight}function tx(e,n,r=5){let{count:i}=e;if(i<=0)return{start:0,end:0};let a=Qb(e),o=Math.max(0,n-e.listOffset),s=Math.floor(o/a),c=Math.ceil((o+e.viewportHeight)/a),l=Math.min(i,Math.max(0,s-r));return{start:l,end:Math.min(i,Math.max(l,c+r))}}function nx(e,n,r,i=0){if(n<0||n>=e.count)return r;let a=$b(e,n),o=a+e.rowHeight;return a<r+i?n===0?0:Math.max(0,a-i):o>r+e.viewportHeight?Math.max(0,o-e.viewportHeight):r}function rx(e,n,r,i=0){if(n<0||n>=e.count)return r;let a=$b(e,n),o=a+e.rowHeight;if(a>=r+i&&o<=r+e.viewportHeight)return r;let s=a+e.rowHeight/2-(e.viewportHeight+i)/2;return Math.max(0,s)}function ix(e){return Math.max(1,Math.floor(e.viewportHeight/Qb(e))-1)}function ax(e){return{count:e.count,topOf:n=>$b(e,n),bottomOf:n=>ex(e,n)}}function ox(e,n){let r=0,i=e.count;for(;r<i;){let a=r+i>>>1;e.bottomOf(a)>n?i=a:r=a+1}return r}function sx(e,n,r,i=0){if(e.count===0)return;let a=Math.min(ox(e,n),e.count-1),o=a,s=e.count;for(;o<s;){let n=o+s>>>1;e.topOf(n)>=r?s=n:o=n+1}let c=Math.max(a,o-1);return{first:Math.max(0,a-i),last:Math.min(e.count-1,c+i)}}const cx={rows:[],indexByKey:new Map};let q=class extends n{constructor(...e){super(...e),this.exclusivity=`none`,this.selectionFilter=`all`,this.interactionMode=`standard`,this._selectedNodes=new Set,this.disableKeyboardNavigation=!1,this.registry=void 0,this.itemDnd=`none`,this.dndExpandHoverMs=500,this.reorderable=!0,this.stickyHeaders=!0,this.virtualize=`auto`,this.virtualizeThreshold=200,this.applyInternalDrop=!0,this._expandedKeys=new Set,this.#i=0,this._selectionVersion=0,this._scrollTop=0,this.#l={rowHeight:30,gap:1,listOffset:0},this.#u=0,this.#d=0,this.#m=0,this.#h=0,this.#g=!1,this.#S=()=>{this.#d===0&&(this.#d=requestAnimationFrame(()=>{this.#d=0,this.#C()}))},this.tickled=new ae(this,{getItems:()=>this.#s().rows.map(({node:e})=>({id:e.item.key,enabled:!0})),hoverDisabled:()=>this.#J?.isDragging===!0||this.#Y?.isDragging===!0,onStateChange:()=>{this.setAttribute(`data-input-mode`,this.tickled.inputMode)}}),this._focusedDepth=0,this.search=new Vt(this,{adapter:Wt(this,{labelSelector:`.tree-label`,highlightKey:`incr-search-highlight`})}),this.#I={indent:20},this.#L=[],this.#R=[],this.#z=new Map,this.#B=new Map,this.#V=new Set,this.#H=new Map,this.#U=new Map,this.#W=!1,this.#G=``,this.#X=new Set,this.#Z=!1,this.#$=()=>{this.#Q=void 0},this.#te=()=>{this.#de===0&&(this.#de=requestAnimationFrame(()=>{this.#de=0,this.#re()}))},this._stickyKeys=[],this.#le=new Map,this.#ue=!0,this.#de=0,this.#pe=!1,this.#Ie=`user`,this.#Le=!1,this.#$e=0,this.#dt=e=>{if(this.search.isOpen)return;let n=this.#s().rows;if(n.length===0)return;if((e.ctrlKey||e.metaKey)&&e.key===`a`){e.preventDefault(),this.selectAll();return}[`ArrowDown`,`ArrowUp`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Enter`,` `].includes(e.key)&&this.tickled.setInputMode(`keyboard`);let r=this.#ot();switch(e.key){case`ArrowDown`:e.preventDefault(),this.#ut(n,r,Math.min(r+1,n.length-1),e.shiftKey);break;case`ArrowUp`:e.preventDefault(),this.#ut(n,r,Math.max(r-1,0),e.shiftKey);break;case`Home`:e.preventDefault(),this.#ut(n,r,0,e.shiftKey);break;case`End`:e.preventDefault(),this.#ut(n,r,n.length-1,e.shiftKey);break;case`PageDown`:{e.preventDefault();let i=this.#lt();this.#ut(n,r,Math.min(r+i,n.length-1),e.shiftKey);break}case`PageUp`:{e.preventDefault();let i=this.#lt();this.#ut(n,r,Math.max(r-i,0),e.shiftKey);break}case`ArrowRight`:{e.preventDefault();let i=n[r];i&&i.node.item.isLeaf!==!0&&(this._expandedKeys.has(i.node.item.key)?r+1<n.length&&this.#st(r+1):this.#Ke(i.node,i.depth)),this.requestUpdate();break}case`ArrowLeft`:{e.preventDefault();let i=n[r];if(i&&this._expandedKeys.has(i.node.item.key))this.#e(Xb(this._expandedKeys,i.node.item.key)),this.dispatchEvent(new CustomEvent(`collapse`,{detail:{node:i.node,depth:i.depth},bubbles:!0,composed:!0}));else if(i.depth>0){let e=i.depth-1;for(let i=r-1;i>=0;i--)if(n[i].depth===e){this.#st(i);break}}this.requestUpdate();break}case`Enter`:{e.preventDefault();let i=n[r];i&&(this.interactionMode!==`manual`&&this.interactionMode!==`checked`&&this.select(i.node),this.dispatchEvent(new CustomEvent(`activate`,{detail:{node:i.node,depth:i.depth},bubbles:!0,composed:!0})),this.requestUpdate());break}case` `:{e.preventDefault();let i=n[r];if(!i)break;this.interactionMode===`checked`?this._handleCheckboxClick(new MouseEvent(`click`),i.node,i.depth):(this.interactionMode===`standard`||this.interactionMode===`vscode`||this.interactionMode===`manual`)&&this.#Ge(i.node,i.depth);break}case`Escape`:e.preventDefault(),this.#tt()}},this.#ft=e=>{let n=e.target.closest(`ul.tree-list li`);if(!n)return;let r=n.dataset.key;if(!r)return;let i=this.#s(),a=i.indexByKey.get(r),o=a===void 0?void 0:i.rows[a];if(!o)return;let s={node:o.node,depth:o.depth};this.dispatchEvent(new CustomEvent(`item-dblclick`,{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`activate`,{detail:s,bubbles:!0,composed:!0}))}}get selectedNodes(){return this._selectedNodes}#e(e){e!==this._expandedKeys&&(this._expandedKeys=e,this.#t=void 0,this.#ue=!0)}#t;#n;#r;#i;#a;#o;invalidateStructure(){this.#i++,this.#t=void 0,this.requestUpdate()}#s(){if(!this.root)return cx;if(this.#t&&this.#n===this.root&&this.#r===this.filterPredicate)return this.#t;let e=this.#D();return this.#t=Wb(this.root,{isExpanded:(e,n)=>this._isExpanded(e,n),isShown:e?n=>e.matches.has(n.item.key):()=>!0}),this.#n=this.root,this.#r=this.filterPredicate,this.#t}#c(){let e=this.root;if(!e)return{parentByKey:new Map,depthsWithIcons:new Set};let n=this.#a;if(n&&n.root===e&&n.version===this.#i)return n.index;let r=Gb(e);return this.#a={root:e,version:this.#i,index:r},r}#l;#u;#d;#f;#p;#m;#h;#g;#_(){return this.virtualize===`off`?!1:this.virtualize===`on`||this.#s().rows.length>this.virtualizeThreshold}#v(e){return{count:e,rowHeight:this.#l.rowHeight,gap:this.#l.gap,listOffset:this.#l.listOffset,viewportHeight:this.#u>0?this.#u:600}}#y(){let e=this.renderRoot.querySelector(`ul.tree-list`),n=e?.querySelector(`li.item:not(.leaving)`),r=n?.getBoundingClientRect().height??0,i=r>0?r:this.#Se(),a=n?Number.parseFloat(getComputedStyle(n).marginTop):NaN,o=Number.isNaN(a)?Number.parseFloat(getComputedStyle(this).getPropertyValue(`--tree-item-gap`)):a,s=Number.isNaN(o)?1:o,c=this.#l.listOffset;if(e){let n=Number.parseFloat(getComputedStyle(e).paddingTop);c=e.offsetTop+(Number.isNaN(n)?0:n)}let l=this.#be()?.clientHeight??0,u=l>0&&l!==this.#u;l>0&&(this.#u=l);let d=this.#l,f=d.rowHeight!==i||d.gap!==s||d.listOffset!==c;return this.#l={rowHeight:i,gap:s,listOffset:c},f||u}#b(e){return tx(this.#v(e),this._scrollTop)}#x(){let e=this.#be()?.scrollTop;e!==void 0&&e!==this._scrollTop&&(this._scrollTop=e)}#S;#C(){let e=this.#be();if(!e||!this.root||!this.#_())return;let n=e.scrollTop;if(n===this._scrollTop)return;let r=tx(this.#v(this.#s().rows.length),n);(r.start!==this.#m||r.end!==this.#h)&&(this._scrollTop=n)}#w(){let e=this.#be();e!==this.#f&&(this.#f?.removeEventListener(`scroll`,this.#S),this.#p?.disconnect(),this.#p=void 0,this.#f=e,e&&(e.addEventListener(`scroll`,this.#S,{passive:!0}),typeof ResizeObserver<`u`&&(this.#p=new ResizeObserver(e=>{let n=e.at(-1)?.contentRect.height??0;n>0&&n!==this.#u&&this.#_()&&this.requestUpdate()}),this.#p.observe(e))))}#T(){this.#f?.removeEventListener(`scroll`,this.#S),this.#f=void 0,this.#p?.disconnect(),this.#p=void 0,this.#d!==0&&(cancelAnimationFrame(this.#d),this.#d=0)}#E(e,n=`edge`){let r=this.#be();if(!r)return;let i=this.#v(this.#s().rows.length),a=this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0,o=(n===`center-if-hidden`?rx:nx)(i,e,r.scrollTop,a);(o!==r.scrollTop||o!==this._scrollTop)&&(r.scrollTop=o,this._scrollTop=o)}#D(){let e=this.filterPredicate,n=this.root;if(!e||!n)return;let r=this.#o;if(r&&r.predicate===e&&r.root===n&&r.version===this.#i)return r;let i=Kb(n,e),{parentByKey:a}=this.#c(),o=new Set;for(let e of i){let n=a.get(e);n!==void 0&&o.add(n)}let s={predicate:e,root:n,version:this.#i,matches:i,autoExpanded:o};return this.#o=s,s}get _structureVersion(){return this.#i}get _depthsWithIcons(){return this.#c().depthsWithIcons}#O;#k(){let e=this.searchModes?.trim();if(e===void 0)return[...zt];let n=new Set(e.split(/\s+/));return zt.filter(e=>n.has(e))}#A(){this.#F&&(this.search.setModes(this.#k()),this.#O?.(),this.#O=Rt(this.#F,this.search))}#j;#M;#N;#P;#F;#I;#L;#R;#z;#B;#V;#H;#U;#W;#G;#K;#q;#J;#Y;#X;#Z;#Q;#$;#ee(){let e=this.#be();this.stickyHeaders&&e?(!this.#pe||this.#fe!==e)&&(this.#fe?.removeEventListener(`scroll`,this.#te),e.addEventListener(`scroll`,this.#te,{passive:!0}),this.#fe=e,this.#pe=!0):this.#pe&&=(this.#fe?.removeEventListener(`scroll`,this.#te),this.#fe=void 0,!1)}#te;#ne(e){return{count:e.length,topOf:n=>e[n].offsetTop,bottomOf:n=>e[n].offsetTop+e[n].offsetHeight}}#re(){this.#ue=!1;let e=new Map,n=()=>this.#ie([],e);if(!this.stickyHeaders||!this.root)return n();let r=this.#be(),i=this.renderRoot.querySelector(`ul.tree-list`);if(!r||!i)return n();let a=this.#s(),o=this.#_(),s=i.children,c=this.#R;if(a.rows.length===0||!o&&(s.length===0||s.length!==c.length))return n();let l=o?ax(this.#v(a.rows.length)):this.#ne(s),u=r.scrollTop,d=u+(this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0),f=ox(l,u);if(!o)for(;f<s.length&&s[f].classList.contains(`leaving`);)f++;if(f>=l.count)return n();let p=o?f:a.indexByKey.get(c[f]);if(p===void 0)return n();let m=[],h=a.rows[p].parentKey;for(;h!==void 0;){let e=a.indexByKey.get(h);if(e===void 0)break;m.unshift(a.rows[e]),h=a.rows[e].parentKey}let g=new Map,_=[];for(let e of m){let n=e.node.item.key,r=o?a.indexByKey.get(n):this.#z.get(n);r===void 0||l.bottomOf(r)>d||(_.push(n),g.set(n,{node:e.node,depth:e.depth}))}this.#ie(_,g)}#ie(e,n){let r=this._stickyKeys;r.length===e.length&&r.every((n,r)=>n===e[r])||(this.#le=n,this._stickyKeys=e)}#ae(){return!this.stickyHeaders||this._stickyKeys.length===0?a:i`
|
|
8085
|
+
`]}};T([d({type:Boolean,reflect:!0})],Eb.prototype,`collapsed`,void 0),T([d({type:String,attribute:`orientation`,reflect:!0})],Eb.prototype,`orientation`,void 0),T([d({type:Boolean})],Eb.prototype,`closable`,void 0),T([d({type:Boolean,reflect:!0})],Eb.prototype,`collapsible`,void 0),T([d({type:String})],Eb.prototype,`title`,void 0),T([d({type:String,attribute:`icon-name`})],Eb.prototype,`iconName`,void 0),T([d({type:String,attribute:`toggle-interaction`})],Eb.prototype,`toggleInteraction`,void 0),T([d({type:String,attribute:`variant`,reflect:!0})],Eb.prototype,`variant`,void 0),T([d({type:Boolean,attribute:`hide-titlebar`})],Eb.prototype,`hideTitlebar`,void 0),T([d({type:Boolean,attribute:`keep-toolbar`})],Eb.prototype,`keepToolbar`,void 0),T([d({type:Boolean,attribute:`sticky-header`,reflect:!0})],Eb.prototype,`stickyHeader`,void 0),Eb=T([w(`ixfx-panel`)],Eb);const Db=`__ungrouped__`;let Ob=class extends n{constructor(...e){super(...e),this.grouped=!1,this.crossGroupSelection=!1,this.#n=new Map,this.#i=!1,this.#a=new je(this),this.#d=e=>{if(this.#i)return;let n=e.target,r;for(let[e,i]of this.#n)if(i===n){r=e;break}if(r!==void 0){if(this.grouped&&!this.crossGroupSelection){this.#i=!0;for(let[e,n]of this.#n)e!==r&&n.clearSelection();this.#i=!1}this.dispatchEvent(new CustomEvent(`grouped-select`,{detail:{selected:this.selectedItems,groupKey:r===Db?void 0:r},bubbles:!0,composed:!0}))}}}#e;#t;#n;#r;#i;#a;get groupBy(){return this.#e}set groupBy(e){this.#e=e,this.requestUpdate()}get factory(){return this.#t}set factory(e){e!==this.#t&&(this.#s(),this.#t=e,this.requestUpdate())}get provider(){return this.#a.provider}set provider(e){this.#a.provider=e,e&&this.#a.request(void 0)}get selectedItems(){let e=new Set;for(let n of this.#n.values())for(let r of n.selectedItems)e.add(r);return e}dispatch(e,n){for(let r of this.#n.values())r.dispatch(e,n)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.addEventListener(`select`,this.#d)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`select`,this.#d)}updated(e){super.updated(e),e.has(`grouped`)&&this.#s(),this.#c()}render(){return this.#t?this.grouped?this.#e?(this.#r=this.#o(),i`${_(this.#r.keys(),e=>e,e=>i`<ixfx-panel data-group-key=${e} .title=${e}></ixfx-panel>`)}`):a:i`<div class="ungrouped-host"></div>`:a}#o(){let e=new Map;if(!this.#e)return e;for(let n of this.#a.items){let r=this.#e(n),i=e.get(r);i||(i=[],e.set(r,i)),i.push(n)}return e}#s(){for(let e of this.#n.values())e.remove();this.#n.clear()}#c(){if(this.#t){if(!this.grouped){this.#l();return}this.#e&&this.#u()}}#l(){let e=this.querySelector(`.ungrouped-host`);if(!e)return;let n=this.#n.get(Db);n||(n=this.#t(void 0),e.appendChild(n),this.#n.set(Db,n)),n.setItems(this.#a.items)}#u(){let e=this.#r??this.#o();for(let n of[...this.#n.keys()])e.has(n)||(this.#n.get(n)?.remove(),this.#n.delete(n));for(let[n,r]of e){let e=[...this.children].find(e=>e instanceof HTMLElement&&e.dataset.groupKey===n);if(!e)continue;let i=this.#n.get(n);i||(i=this.#t(n),e.appendChild(i),this.#n.set(n,i)),i.setItems(r)}}#d};T([d({type:Boolean,reflect:!0})],Ob.prototype,`grouped`,void 0),T([d({type:Boolean,attribute:`cross-group-selection`,reflect:!0})],Ob.prototype,`crossGroupSelection`,void 0),Ob=T([w(`ixfx-grouped-item-lister`)],Ob);const kb=`application/x-ixfx-tree`,Ab=new Map,jb=new Map;let Mb,Nb=0;function Pb(){return`tree-drag-${++Nb}-${Date.now()}`}function Fb(e,n,r,i){Ab.set(e,{sourceId:e,nodes:r,keys:i}),jb.set(e,new WeakRef(n)),Mb=e}function Ib(e){Ab.delete(e),jb.delete(e),Mb===e&&(Mb=void 0)}function Lb(){if(Mb===void 0)return;let e=Ab.get(Mb);if(e)return{sourceId:Mb,keys:e.keys,nodes:e.nodes,element:jb.get(Mb)?.deref()}}const Rb={direction:0,depth:0};function zb(e){return Math.min(e/2,Math.max(24,Math.min(64,e*.2)))}function Bb(e,n){if(n<=0)return Rb;let r=zb(n);return e<r?{direction:-1,depth:Math.min(1,(r-e)/r)}:e>n-r?{direction:1,depth:Math.min(1,(e-(n-r))/r)}:Rb}function Vb(e,n){let r=Math.min(1,Math.max(0,n)/2500);return(120+3080*r*r)*(.35+.65*Math.min(1,Math.max(0,e)))}function Hb(e,n,r){return Math.max(n,Math.min(r,e))}var Ub=class{#e;#t;#n=!1;#r;#i=`internal`;#a=[];#o=[];#s;#c;#l=0;#u=0;#d=0;#f=0;#p=0;#m=0;#h=0;#g;#_=!1;#v;constructor(e,n){this.#e=e,this.#t=n,e.addController(this)}get isDragging(){return this.#n}get isRejected(){return this.#n&&this.#r===void 0}get dropState(){return this.#r}hostConnected(){this.#y()}hostUpdated(){this.#y()}#y(){let e=this.#t.getScrollContainer();!e||e===this.#v||(this.#b(),this.#v=e,e.addEventListener(`dragenter`,this.#x),e.addEventListener(`dragover`,this.#S),e.addEventListener(`dragleave`,this.#w),e.addEventListener(`drop`,this.#T))}#b(){let e=this.#v;e&&(e.removeEventListener(`dragenter`,this.#x),e.removeEventListener(`dragover`,this.#S),e.removeEventListener(`dragleave`,this.#w),e.removeEventListener(`drop`,this.#T),this.#v=void 0)}hostDisconnected(){this.#b(),this.#A(),this.#N(),this.#n=!1,this.#r=void 0}#x=e=>{this.#t.getDndMode()===`none`||!e.dataTransfer||this.#t.resolveDrag(e.dataTransfer,`hover`)!==void 0&&(e.preventDefault(),this.#n||(this.#n=!0,this.#t.onActiveChange(!0)))};#S=e=>{if(this.#t.getDndMode()===`none`||!e.dataTransfer)return;this.#u=e.clientX,this.#d=e.clientY,this.#g=e;let n=this.#t.resolveDrag(e.dataTransfer,`hover`);if(!n){this.#C(e);return}this.#n||(this.#n=!0,this.#t.onActiveChange(!0)),this.#i=n.source,this.#a=n.keys,this.#o=n.nodes;let r=this.#t.getVisibleRows();this.#k(this.#D(r,e.clientY)),this.#j();let i=this.#O(e,r,n.source);if(!i){this.#C(e,!1);return}let a={source:n.source,dragged:n.nodes.length>0?n.nodes:void 0,draggedKeys:n.keys,target:i,dataTransfer:e.dataTransfer};if(!this.#t.vet(a)){this.#C(e,!1);return}e.preventDefault(),e.dataTransfer.dropEffect=n.source===`internal`?`move`:`copy`,this.#P(i)};#C(e,n=!0){e.dataTransfer&&(e.dataTransfer.dropEffect=`none`),this.#P(void 0),n&&this.#A()}#w=e=>{let n=this.#t.getScrollContainer(),r=e.relatedTarget;n&&r&&n.contains(r)||this.#E()};#T=e=>{if(!e.dataTransfer){this.#E();return}e.preventDefault(),this.#N(),this.#A();let n=e=>{this.#r=void 0,this.#n=!1,this.#t.onDropStateChange(void 0),this.#t.onActiveChange(!1),this.#t.onDragEnd(e)};if(this.#t.getDndMode()===`none`){n(!1);return}let r=this.#t.resolveDrag(e.dataTransfer,`drop`);if(!r){n(!1);return}this.#a=r.keys,this.#o=r.nodes;let i=this.#O(e,this.#t.getVisibleRows(),r.source);if(!i){n(!1);return}let a={source:r.source,dragged:r.nodes.length>0?r.nodes:void 0,draggedKeys:r.keys,target:i,dataTransfer:e.dataTransfer};if(!this.#t.vet(a)){n(!1);return}let o={...a,external:r.source===`external`?r.nodes:void 0};n(this.#t.commitDrop(o))};#E(){this.#A(),this.#N(),this.#r!==void 0&&(this.#r=void 0,this.#t.onDropStateChange(void 0)),this.#n&&(this.#n=!1,this.#t.onActiveChange(!1))}#D(e,n){if(e.length!==0)return n<e[0].rect.top?e[0]:n>e[e.length-1].rect.bottom?e[e.length-1]:e.find(e=>n>=e.rect.top&&n<=e.rect.bottom)??e[e.length-1]}#O(e,n,r){if(n.length===0)return;let i=this.#D(n,e.clientY);if(!i)return;let a=Hb((e.clientY-i.rect.top)/i.rect.height,0,1),o=a<.25?`before`:a>.75?`after`:`inside`,s=i.node.item.isLeaf===!0;o===`inside`&&s&&(o=`after`);let c=!1;o===`after`&&!s&&this.#t.isExpanded(i.key)&&(o=`inside`,c=!0);let l,u,d,f;if(o===`inside`)l=i.key,u=i.key,d=i.depth+1,f=c?0:i.node.children?.length??0;else{let r=this.#t.getIndentPx()||1,a=n[0].rect.left,s=Hb(Math.round((e.clientX-a)/r),0,i.depth),c={node:i.node,depth:i.depth,parentKey:this.#t.getRowInfo(i.key)?.parentKey};u=i.key;for(let e=i.depth-s;e>0&&c.parentKey!==void 0;e--){let e=this.#t.getRowInfo(c.parentKey);if(!e)break;u=c.parentKey,c=e}d=c.depth,l=c.parentKey;let p=this.#t.getChildren(l).findIndex(e=>e.item.key===u);f=(p<0?0:p)+ +(o===`after`)}if(r===`internal`){for(let e of this.#a)if(e===l||e===u||l!==void 0&&this.#t.isSelfOrDescendant(e,l)||o!==`inside`&&this.#t.isSelfOrDescendant(e,u))return;if(this.#a.length>0&&!this.#t.isReorderAllowed()&&!this.#a.some(e=>this.#t.getParentKey(e)!==l))return}return{parentKey:l,index:f,referenceKey:u,position:o,depth:d}}#k(e){if(!e||e.node.item.isLeaf===!0||this.#t.isExpanded(e.key)){this.#A();return}if(e.key===this.#c)return;this.#A();let n=this.#c=e.key;this.#s=setTimeout(()=>{this.#s=void 0,this.#c===n&&(this.#c=void 0,this.#t.expandKey(n))},Math.max(0,this.#t.getExpandHoverMs()))}#A(){this.#s!==void 0&&(clearTimeout(this.#s),this.#s=void 0),this.#c=void 0}#j(){this.#l===0&&(this.#l=requestAnimationFrame(this.#M))}#M=e=>{if(this.#l=0,!this.#n)return;let n=this.#t.getScrollContainer();if(!n||this.#_&&this.#g&&(this.#_=!1,this.#S(this.#g),!this.#n))return;let r=n.getBoundingClientRect(),i=this.#u>=r.left&&this.#u<=r.right?Bb(this.#d-r.top,r.height):{direction:0,depth:0};if(i.direction!==this.#f&&(this.#f=i.direction,this.#p=e,this.#m=e,this.#h=0),i.direction===0)return;let a=Math.min(50,Math.max(0,e-this.#m));this.#m=e;let o=Vb(i.depth,e-this.#p),s=i.direction*o*a/1e3+this.#h,c=Math.trunc(s);if(this.#h=s-c,c!==0){let e=n.scrollTop;n.scrollTop=e+c,n.scrollTop!==e&&(this.#_=!0)}this.#j()};#N(){this.#l!==0&&(cancelAnimationFrame(this.#l),this.#l=0),this.#f=0,this.#h=0,this.#_=!1,this.#g=void 0}#P(e){let n=e===void 0?this.#r===void 0:e.referenceKey===this.#r?.referenceKey&&e.position===this.#r?.position&&e.depth===this.#r?.depth&&e.index===this.#r?.index;this.#r=e,(!n||this.#n)&&this.#t.onDropStateChange(e)}};function Wb(e,n){let r=[],i=new Map,a=[],o=(e,r,i)=>{if(!e||e.length===0)return;let o=e.filter(e=>n.isShown(e,r));for(let e=o.length-1;e>=0;e--)a.push({node:o[e],depth:r,parentKey:i,posInSet:e+1,setSize:o.length})};for(o(e.children,0,void 0);a.length>0;){let{node:e,depth:s,parentKey:c,posInSet:l,setSize:u}=a.pop();i.set(e.item.key,r.length),r.push({node:e,depth:s,parentKey:c,posInSet:l,setSize:u}),e.children&&e.children.length>0&&n.isExpanded(e,s)&&o(e.children,s+1,e.item.key)}return{rows:r,indexByKey:i}}function Gb(e){let n=new Map,r=new Set,i=new Set([e.item.key]),a=new Set,o=[];if(e.children)for(let r of e.children)n.set(r.item.key,e.item.key),o.push({node:r,depth:0,parentKey:e.item.key});for(;o.length>0;){let{node:e,depth:s,parentKey:c}=o.pop();if(i.has(e.item.key)&&a.add(e.item.key),i.add(e.item.key),n.set(e.item.key,c),e.item.icon&&r.add(s),e.children)for(let n=e.children.length-1;n>=0;n--){let r=e.children[n];o.push({node:r,depth:s+1,parentKey:e.item.key})}}if(a.size>0){let e=[...a].slice(0,5).map(e=>`"${e}"`).join(`, `);console.warn(`[ixfx-tree] ${a.size} duplicate item key(s) in tree (e.g. ${e}). Keys must be unique across the whole tree; duplicates break checkbox state, expansion and selection.`)}return{parentByKey:n,depthsWithIcons:r}}function Kb(e,n){let r=new Set;if(!e.children)return r;let i=[],a=(e,r)=>{i.push({node:e,depth:r,next:0,matched:n(e,r)})};for(let n of e.children)for(a(n,0);i.length>0;){let e=i[i.length-1],n=e.node.children;if(n&&e.next<n.length){a(n[e.next++],e.depth+1);continue}i.pop(),e.matched&&(r.add(e.node.item.key),i.length>0&&(i[i.length-1].matched=!0))}return r}function qb(e,n,r){if(r.size===0)return[...e];let i=new Set;for(let n of e)i.add(n.node.item.key);let a=Symbol(`end`),o=new Map,s=a;for(let e=n.length-1;e>=0;e--){let a=n[e];if(i.has(a)){s=a;continue}let c=r.get(a);if(!c)continue;let l=o.get(s);l?l.push(c):o.set(s,[c])}let c=[];for(let n of e){let e=o.get(n.node.item.key);if(e)for(let n=e.length-1;n>=0;n--)c.push(e[n]);c.push(n)}let l=o.get(a);if(l)for(let e=l.length-1;e>=0;e--)c.push(l[e]);return c}function Jb(e,n){let r=new Map;if(!e.children)return r;let i=[];for(let a of e.children)for(i.push({node:a,next:0,checked:0,unchecked:0,counted:0});i.length>0;){let e=i[i.length-1],{node:a}=e,o=a.children,s=a.item.isLeaf||!o?.length;if(!s&&e.next<o.length){i.push({node:o[e.next++],next:0,checked:0,unchecked:0,counted:0});continue}i.pop();let c;c=s?n.has(a)?`checked`:`unchecked`:e.counted===0?`unchecked`:e.checked===e.counted?`checked`:e.unchecked===e.counted?`unchecked`:`indeterminate`,r.set(a.item.key,c);let l=s&&a.item.selectable===!1;if(i.length>0&&!l){let e=i[i.length-1];e.counted++,c===`checked`?e.checked++:c===`unchecked`&&e.unchecked++}}return r}function Yb(e,n){if(e.has(n))return e;let r=new Set(e);return r.add(n),r}function Xb(e,n){if(!e.has(n))return e;let r=new Set(e);return r.delete(n),r}function Zb(e,n){let r;for(let i of e)n(i)&&(r??=new Set(e),r.delete(i));return r??e}function Qb(e){return Math.max(1,e.rowHeight+e.gap)}function $b(e,n){return e.listOffset+n*Qb(e)+e.gap}function ex(e,n){return $b(e,n)+e.rowHeight}function tx(e,n,r=5){let{count:i}=e;if(i<=0)return{start:0,end:0};let a=Qb(e),o=Math.max(0,n-e.listOffset),s=Math.floor(o/a),c=Math.ceil((o+e.viewportHeight)/a),l=Math.min(i,Math.max(0,s-r));return{start:l,end:Math.min(i,Math.max(l,c+r))}}function nx(e,n,r,i=0){if(n<0||n>=e.count)return r;let a=$b(e,n),o=a+e.rowHeight;return a<r+i?n===0?0:Math.max(0,a-i):o>r+e.viewportHeight?Math.max(0,o-e.viewportHeight):r}function rx(e,n,r,i=0){if(n<0||n>=e.count)return r;let a=$b(e,n),o=a+e.rowHeight;if(a>=r+i&&o<=r+e.viewportHeight)return r;let s=a+e.rowHeight/2-(e.viewportHeight+i)/2;return Math.max(0,s)}function ix(e){return Math.max(1,Math.floor(e.viewportHeight/Qb(e))-1)}function ax(e){return{count:e.count,topOf:n=>$b(e,n),bottomOf:n=>ex(e,n)}}function ox(e,n){let r=0,i=e.count;for(;r<i;){let a=r+i>>>1;e.bottomOf(a)>n?i=a:r=a+1}return r}function sx(e,n,r,i=0){if(e.count===0)return;let a=Math.min(ox(e,n),e.count-1),o=a,s=e.count;for(;o<s;){let n=o+s>>>1;e.topOf(n)>=r?s=n:o=n+1}let c=Math.max(a,o-1);return{first:Math.max(0,a-i),last:Math.min(e.count-1,c+i)}}const cx={rows:[],indexByKey:new Map};let q=class extends n{constructor(...e){super(...e),this.exclusivity=`none`,this.selectionFilter=`all`,this.interactionMode=`standard`,this._selectedNodes=new Set,this.disableKeyboardNavigation=!1,this.registry=void 0,this.itemDnd=`none`,this.dndExpandHoverMs=500,this.reorderable=!0,this.stickyHeaders=!0,this.virtualize=`auto`,this.virtualizeThreshold=200,this.applyInternalDrop=!0,this._expandedKeys=new Set,this.#i=0,this._selectionVersion=0,this._scrollTop=0,this.#l={rowHeight:30,gap:1,listOffset:0},this.#u=0,this.#d=0,this.#m=0,this.#h=0,this.#g=!1,this.#S=()=>{this.#d===0&&(this.#d=requestAnimationFrame(()=>{this.#d=0,this.#C()}))},this.tickled=new ae(this,{getItems:()=>this.#s().rows.map(({node:e})=>({id:e.item.key,enabled:!0})),hoverDisabled:()=>this.#J?.isDragging===!0||this.#Y?.isDragging===!0,onStateChange:()=>{this.setAttribute(`data-input-mode`,this.tickled.inputMode)}}),this._focusedDepth=0,this.search=new Vt(this,{adapter:Wt(this,{labelSelector:`.tree-label`,highlightKey:`incr-search-highlight`})}),this.#I={indent:20},this.#L=[],this.#R=[],this.#z=new Map,this.#B=new Map,this.#V=new Set,this.#H=new Map,this.#U=new Map,this.#W=!1,this.#G=``,this.#X=new Set,this.#Z=!1,this.#$=()=>{this.#Q=void 0},this.#te=()=>{this.#de===0&&(this.#de=requestAnimationFrame(()=>{this.#de=0,this.#re()}))},this._stickyKeys=[],this.#le=new Map,this.#ue=!0,this.#de=0,this.#pe=!1,this.#Ie=`user`,this.#Le=!1,this.#$e=0,this.#dt=e=>{if(this.search.isOpen)return;let n=this.#s().rows;if(n.length===0)return;if((e.ctrlKey||e.metaKey)&&e.key===`a`){e.preventDefault(),this.selectAll();return}[`ArrowDown`,`ArrowUp`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Enter`,` `].includes(e.key)&&this.tickled.setInputMode(`keyboard`);let r=this.#ot();switch(e.key){case`ArrowDown`:e.preventDefault(),this.#ut(n,r,Math.min(r+1,n.length-1),e.shiftKey);break;case`ArrowUp`:e.preventDefault(),this.#ut(n,r,Math.max(r-1,0),e.shiftKey);break;case`Home`:e.preventDefault(),this.#ut(n,r,0,e.shiftKey);break;case`End`:e.preventDefault(),this.#ut(n,r,n.length-1,e.shiftKey);break;case`PageDown`:{e.preventDefault();let i=this.#lt();this.#ut(n,r,Math.min(r+i,n.length-1),e.shiftKey);break}case`PageUp`:{e.preventDefault();let i=this.#lt();this.#ut(n,r,Math.max(r-i,0),e.shiftKey);break}case`ArrowRight`:{e.preventDefault();let i=n[r];i&&i.node.item.isLeaf!==!0&&(this._expandedKeys.has(i.node.item.key)?r+1<n.length&&this.#st(r+1):this.#Ke(i.node,i.depth)),this.requestUpdate();break}case`ArrowLeft`:{e.preventDefault();let i=n[r];if(i&&this._expandedKeys.has(i.node.item.key))this.#e(Xb(this._expandedKeys,i.node.item.key)),this.dispatchEvent(new CustomEvent(`collapse`,{detail:{node:i.node,depth:i.depth},bubbles:!0,composed:!0}));else if(i.depth>0){let e=i.depth-1;for(let i=r-1;i>=0;i--)if(n[i].depth===e){this.#st(i);break}}this.requestUpdate();break}case`Enter`:{e.preventDefault();let i=n[r];i&&(this.interactionMode!==`manual`&&this.interactionMode!==`checked`&&this.select(i.node),this.dispatchEvent(new CustomEvent(`activate`,{detail:{node:i.node,depth:i.depth},bubbles:!0,composed:!0})),this.requestUpdate());break}case` `:{e.preventDefault();let i=n[r];if(!i)break;this.interactionMode===`checked`?this._handleCheckboxClick(new MouseEvent(`click`),i.node,i.depth):(this.interactionMode===`standard`||this.interactionMode===`vscode`||this.interactionMode===`manual`)&&this.#Ge(i.node,i.depth);break}case`Escape`:e.preventDefault(),this.#tt()}},this.#ft=e=>{let n=e.target.closest(`ul.tree-list li`);if(!n)return;let r=n.dataset.key;if(!r)return;let i=this.#s(),a=i.indexByKey.get(r),o=a===void 0?void 0:i.rows[a];if(!o)return;let s={node:o.node,depth:o.depth};this.dispatchEvent(new CustomEvent(`item-dblclick`,{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`activate`,{detail:s,bubbles:!0,composed:!0}))}}get selectedNodes(){return this._selectedNodes}#e(e){e!==this._expandedKeys&&(this._expandedKeys=e,this.#t=void 0,this.#ue=!0)}#t;#n;#r;#i;#a;#o;invalidateStructure(){this.#i++,this.#t=void 0,this.requestUpdate()}#s(){if(!this.root)return cx;if(this.#t&&this.#n===this.root&&this.#r===this.filterPredicate)return this.#t;let e=this.#D();return this.#t=Wb(this.root,{isExpanded:(e,n)=>this._isExpanded(e,n),isShown:e?n=>e.matches.has(n.item.key):()=>!0}),this.#n=this.root,this.#r=this.filterPredicate,this.#t}#c(){let e=this.root;if(!e)return{parentByKey:new Map,depthsWithIcons:new Set};let n=this.#a;if(n&&n.root===e&&n.version===this.#i)return n.index;let r=Gb(e);return this.#a={root:e,version:this.#i,index:r},r}#l;#u;#d;#f;#p;#m;#h;#g;#_(){return this.virtualize===`off`?!1:this.virtualize===`on`||this.#s().rows.length>this.virtualizeThreshold}#v(e){return{count:e,rowHeight:this.#l.rowHeight,gap:this.#l.gap,listOffset:this.#l.listOffset,viewportHeight:this.#u>0?this.#u:600}}#y(){let e=this.renderRoot.querySelector(`ul.tree-list`),n=e?.querySelector(`li.item:not(.leaving)`),r=n?.getBoundingClientRect().height??0,i=r>0?r:this.#Se(),a=n?Number.parseFloat(getComputedStyle(n).marginTop):NaN,o=Number.isNaN(a)?Number.parseFloat(getComputedStyle(this).getPropertyValue(`--tree-item-gap`)):a,s=Number.isNaN(o)?1:o,c=this.#l.listOffset;if(e){let n=Number.parseFloat(getComputedStyle(e).paddingTop);c=e.offsetTop+(Number.isNaN(n)?0:n)}let l=this.#be()?.clientHeight??0,u=l>0&&l!==this.#u;l>0&&(this.#u=l);let d=this.#l,f=d.rowHeight!==i||d.gap!==s||d.listOffset!==c;return this.#l={rowHeight:i,gap:s,listOffset:c},f||u}#b(e){return tx(this.#v(e),this._scrollTop)}#x(){let e=this.#be()?.scrollTop;e!==void 0&&e!==this._scrollTop&&(this._scrollTop=e)}#S;#C(){let e=this.#be();if(!e||!this.root||!this.#_())return;let n=e.scrollTop;if(n===this._scrollTop)return;let r=tx(this.#v(this.#s().rows.length),n);(r.start!==this.#m||r.end!==this.#h)&&(this._scrollTop=n)}#w(){let e=this.#be();e!==this.#f&&(this.#f?.removeEventListener(`scroll`,this.#S),this.#p?.disconnect(),this.#p=void 0,this.#f=e,e&&(e.addEventListener(`scroll`,this.#S,{passive:!0}),typeof ResizeObserver<`u`&&(this.#p=new ResizeObserver(e=>{let n=e.at(-1)?.contentRect.height??0;n>0&&n!==this.#u&&this.#_()&&this.requestUpdate()}),this.#p.observe(e))))}#T(){this.#f?.removeEventListener(`scroll`,this.#S),this.#f=void 0,this.#p?.disconnect(),this.#p=void 0,this.#d!==0&&(cancelAnimationFrame(this.#d),this.#d=0)}#E(e,n=`edge`){let r=this.#be();if(!r)return;let i=this.#v(this.#s().rows.length),a=this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0,o=(n===`center-if-hidden`?rx:nx)(i,e,r.scrollTop,a);(o!==r.scrollTop||o!==this._scrollTop)&&(r.scrollTop=o,this._scrollTop=o)}#D(){let e=this.filterPredicate,n=this.root;if(!e||!n)return;let r=this.#o;if(r&&r.predicate===e&&r.root===n&&r.version===this.#i)return r;let i=Kb(n,e),{parentByKey:a}=this.#c(),o=new Set;for(let e of i){let n=a.get(e);n!==void 0&&o.add(n)}let s={predicate:e,root:n,version:this.#i,matches:i,autoExpanded:o};return this.#o=s,s}get _structureVersion(){return this.#i}get _depthsWithIcons(){return this.#c().depthsWithIcons}#O;#k(){let e=this.searchModes?.trim();if(e===void 0)return[...zt];let n=new Set(e.split(/\s+/));return zt.filter(e=>n.has(e))}#A(){this.#F&&(this.search.setModes(this.#k()),this.#O?.(),this.#O=Rt(this.#F,this.search))}#j;#M;#N;#P;#F;#I;#L;#R;#z;#B;#V;#H;#U;#W;#G;#K;#q;#J;#Y;#X;#Z;#Q;#$;#ee(){let e=this.#be();this.stickyHeaders&&e?(!this.#pe||this.#fe!==e)&&(this.#fe?.removeEventListener(`scroll`,this.#te),e.addEventListener(`scroll`,this.#te,{passive:!0}),this.#fe=e,this.#pe=!0):this.#pe&&=(this.#fe?.removeEventListener(`scroll`,this.#te),this.#fe=void 0,!1)}#te;#ne(e){return{count:e.length,topOf:n=>e[n].offsetTop,bottomOf:n=>e[n].offsetTop+e[n].offsetHeight}}#re(){this.#ue=!1;let e=new Map,n=()=>this.#ie([],e);if(!this.stickyHeaders||!this.root)return n();let r=this.#be(),i=this.renderRoot.querySelector(`ul.tree-list`);if(!r||!i)return n();let a=this.#s(),o=this.#_(),s=i.children,c=this.#R;if(a.rows.length===0||!o&&(s.length===0||s.length!==c.length))return n();let l=o?ax(this.#v(a.rows.length)):this.#ne(s),u=r.scrollTop,d=u+(this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0),f=ox(l,u);if(!o)for(;f<s.length&&s[f].classList.contains(`leaving`);)f++;if(f>=l.count)return n();let p=o?f:a.indexByKey.get(c[f]);if(p===void 0)return n();let m=[],h=a.rows[p].parentKey;for(;h!==void 0;){let e=a.indexByKey.get(h);if(e===void 0)break;m.unshift(a.rows[e]),h=a.rows[e].parentKey}let g=new Map,_=[];for(let e of m){let n=e.node.item.key,r=o?a.indexByKey.get(n):this.#z.get(n);r===void 0||l.bottomOf(r)>d||(_.push(n),g.set(n,{node:e.node,depth:e.depth}))}this.#ie(_,g)}#ie(e,n){let r=this._stickyKeys;r.length===e.length&&r.every((n,r)=>n===e[r])||(this.#le=n,this._stickyKeys=e)}#ae(){return!this.stickyHeaders||this._stickyKeys.length===0?a:i`
|
|
8070
8086
|
<div class="sticky-anchor">
|
|
8071
8087
|
<div class="sticky-headers" part="sticky-headers">
|
|
8072
8088
|
${this._stickyKeys.map(e=>{let n=this.#le.get(e);return n?this.#oe(n.node,n.depth):a})}
|
|
@@ -10620,7 +10636,7 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
10620
10636
|
height: 1.25em;
|
|
10621
10637
|
flex-shrink: 0;
|
|
10622
10638
|
}
|
|
10623
|
-
`,document.head.appendChild(e)}let iT=class extends n{constructor(...e){super(...e),this.orientation=`horizontal`,this.variant=`titlebar`,this.toggleInteraction=`implicit`,this.collapsible=!0,this.accordion=!1,this.allowReorder=!1,this._dragState=null,this._suppressNextClick=!1,this._onClickCapture=e=>{this._suppressNextClick&&(this._suppressNextClick=!1,e.preventDefault(),e.stopPropagation())},this._onKeyDown=e=>{let n=this._dragState;if(e.key!==`Escape`||!n?.active)return;e.preventDefault();let r=n.pointerId;this._abortDrag(),this._endDrag(r)},this._onPointerDown=e=>{if(!this.allowReorder||e.button!==0)return;let n=this._findDragTarget(e);if(!n?.parentNode)return;let r=Array.prototype.indexOf.call(n.parentNode.children,n);r<0||(this._dragState={pointerId:e.pointerId,source:n,fromIndex:r,startX:e.clientX,startY:e.clientY,active:!1,ghost:null,gapIndex:void 0},window.addEventListener(`pointermove`,this._onPointerMove),window.addEventListener(`pointerup`,this._onPointerUp),window.addEventListener(`pointercancel`,this._onPointerCancel))},this._onPointerMove=e=>{let n=this._dragState;if(!n||e.pointerId!==n.pointerId)return;let r=Math.hypot(e.clientX-n.startX,e.clientY-n.startY);if(!n.active){if(r<5)return;this._beginDrag(e)}n.ghost?.move(e.clientX,e.clientY);let i=this._computeGapIndex(e.clientX,e.clientY);i!==n.gapIndex&&(n.gapIndex=i,this.requestUpdate())},this._onPointerUp=e=>{let n=this._dragState;if(!(!n||e.pointerId!==n.pointerId)){if(n.active){let r=this._computeGapIndex(e.clientX,e.clientY);this._commitDrag(n.source,n.fromIndex,r)}this._endDrag(e.pointerId)}},this._onPointerCancel=e=>{let n=this._dragState;!n||e.pointerId!==n.pointerId||(this._abortDrag(),this._endDrag(e.pointerId))}}_onPanelToggle(e){let n=e.target;if(!n.collapsed&&this.accordion)for(let e of this._panels)e!==n&&(e.collapsed=!0)}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this._onClickCapture,!0)}disconnectedCallback(){this.removeEventListener(`click`,this._onClickCapture,!0),this._dragState&&(this._abortDrag(),this._endDrag(this._dragState.pointerId)),super.disconnectedCallback()}firstUpdated(){this.gap!==void 0&&this.style.setProperty(`--group-gap`,this.gap),this.updateComplete.then(()=>{this._propagateAll()})}updated(e){super.updated(e),e.has(`gap`)&&(this.gap===void 0?this.style.removeProperty(`--group-gap`):this.style.setProperty(`--group-gap`,this.gap)),(e.has(`variant`)||e.has(`toggleInteraction`)||e.has(`orientation`)||e.has(`collapsible`))&&this.updateComplete.then(()=>{this._propagateAll()})}_propagateAll(){let e=this.orientation===`horizontal`?`vertical`:`horizontal`;for(let n of this._panels)n.setAttribute(`variant`,this.variant),n.setAttribute(`toggle-interaction`,this.toggleInteraction),n.setAttribute(`orientation`,e),this.collapsible?n.setAttribute(`collapsible`,``):n.removeAttribute(`collapsible`)}_onSlotChange(){this.updateComplete.then(()=>{this._propagateAll()})}_findDragTarget(e){if(!this.allowReorder)return null;let n=e.composedPath(),r=null,i=!1;for(let e of n){if(!(e instanceof HTMLElement))continue;let n=e.tagName;if(n===`BUTTON`||n===`A`||n===`INPUT`||n===`SELECT`||n===`TEXTAREA`||e.classList.contains(`toolbar`)||e.classList.contains(`close-btn`)||e.classList.contains(`caret-btn`)||e.hasAttribute?.(`slot`)&&e.getAttribute(`slot`)===`toolbar`)return null;n===`IXFX-TITLEBAR`&&(i=!0),!r&&n===`IXFX-PANEL`&&(r=e)}return!r||!i?null:r}_beginDrag(e){let n=this._dragState;if(!(!n||n.active)){try{this.setPointerCapture(e.pointerId)}catch{}n.active=!0,this.setAttribute(`dragging`,``),n.source.setAttribute(`drag-source`,``),n.ghost=this._createGhost(n.source),n.ghost?.move(e.clientX,e.clientY)}}_abortDrag(){let e=this._dragState;e&&(e.source.removeAttribute(`drag-source`),e.gapIndex!==void 0&&(e.gapIndex=void 0,this.requestUpdate()))}_endDrag(e){let n=this._dragState;if(n){n.ghost?.destroy(),n.ghost=null,this.removeAttribute(`dragging`),this._dragState=null,window.removeEventListener(`pointermove`,this._onPointerMove),window.removeEventListener(`pointerup`,this._onPointerUp),window.removeEventListener(`pointercancel`,this._onPointerCancel);try{this.releasePointerCapture(e)}catch{}this.requestUpdate()}}_commitDrag(e,n,r){e.removeAttribute(`drag-source`);let i=(this._panels??[]).filter(n=>n!==e),a=r===void 0?i.length:Math.max(0,Math.min(r,i.length)),o=e.parentNode;if(!o)return;let s=i[a]??null;o.insertBefore(e,s);let c=Array.prototype.indexOf.call(o.children,e);c!==n&&(this._suppressNextClick=!0,this.dispatchEvent(new CustomEvent(`reorder`,{bubbles:!0,composed:!0,detail:{fromIndex:n,toIndex:c,panel:e}})))}_createGhost(e){let n=document.createElement(`span`);if(n.style.display=`inline-flex`,n.style.alignItems=`center`,n.style.padding=`0 var(--space-s, 8px)`,n.style.minWidth=`0`,e.iconName){let r=document.createElement(`ixfx-icon`);r.name=e.iconName,n.appendChild(r)}let r=document.createElement(`span`);r.textContent=(e.title||(e.textContent??``).trim()).slice(0,60),r.style.paddingLeft=`1ch`,r.style.overflow=`hidden`,r.style.textOverflow=`ellipsis`,r.style.whiteSpace=`nowrap`,n.appendChild(r);try{return rT(),Wg({anchor:e,content:n,className:`ixfx-panel-group-ghost`})}catch{return null}}_computeGapIndex(e,n){let r=this._dragState;if(!r)return;let i=(this._panels??[]).filter(e=>e!==r.source);if(i.length===0)return 0;let a=this.orientation===`horizontal`,o=a?e:n;return tT(i.map(e=>{let n=e.getBoundingClientRect();return[a?n.left:n.top,a?n.right:n.bottom]}),o)}_computeCaretStyle(){let e=this._dragState;if(!e?.active||e.gapIndex===void 0)return;let n=(this._panels??[]).filter(n=>n!==e.source);if(n.length===0)return;let r=this.getBoundingClientRect();if(!r)return;let i=Math.max(0,Math.min(e.gapIndex,n.length)),a=i<n.length?n[i].getBoundingClientRect():n[n.length-1].getBoundingClientRect();return this.orientation===`horizontal`?`transform: translate(${(i<n.length?a.left:a.right)-r.left-1}px, 0); width: 2px; height: ${r.height}px;`:`transform: translate(0, ${(i<n.length?a.top:a.bottom)-r.top-1}px); width: ${r.width}px; height: 2px;`}render(){let e=this._computeCaretStyle();return i`
|
|
10639
|
+
`,document.head.appendChild(e)}let iT=class extends n{constructor(...e){super(...e),this.orientation=`horizontal`,this.variant=`titlebar`,this.toggleInteraction=`implicit`,this.collapsible=!0,this.accordion=!1,this.allowReorder=!1,this.stickyHeaders=!0,this._dragState=null,this._suppressNextClick=!1,this._onClickCapture=e=>{this._suppressNextClick&&(this._suppressNextClick=!1,e.preventDefault(),e.stopPropagation())},this._onKeyDown=e=>{let n=this._dragState;if(e.key!==`Escape`||!n?.active)return;e.preventDefault();let r=n.pointerId;this._abortDrag(),this._endDrag(r)},this._onPointerDown=e=>{if(!this.allowReorder||e.button!==0)return;let n=this._findDragTarget(e);if(!n?.parentNode)return;let r=Array.prototype.indexOf.call(n.parentNode.children,n);r<0||(this._dragState={pointerId:e.pointerId,source:n,fromIndex:r,startX:e.clientX,startY:e.clientY,active:!1,ghost:null,gapIndex:void 0},window.addEventListener(`pointermove`,this._onPointerMove),window.addEventListener(`pointerup`,this._onPointerUp),window.addEventListener(`pointercancel`,this._onPointerCancel))},this._onPointerMove=e=>{let n=this._dragState;if(!n||e.pointerId!==n.pointerId)return;let r=Math.hypot(e.clientX-n.startX,e.clientY-n.startY);if(!n.active){if(r<5)return;this._beginDrag(e)}n.ghost?.move(e.clientX,e.clientY);let i=this._computeGapIndex(e.clientX,e.clientY);i!==n.gapIndex&&(n.gapIndex=i,this.requestUpdate())},this._onPointerUp=e=>{let n=this._dragState;if(!(!n||e.pointerId!==n.pointerId)){if(n.active){let r=this._computeGapIndex(e.clientX,e.clientY);this._commitDrag(n.source,n.fromIndex,r)}this._endDrag(e.pointerId)}},this._onPointerCancel=e=>{let n=this._dragState;!n||e.pointerId!==n.pointerId||(this._abortDrag(),this._endDrag(e.pointerId))}}_onPanelToggle(e){let n=e.target;if(!n.collapsed&&this.accordion)for(let e of this._panels)e!==n&&(e.collapsed=!0)}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,this._onClickCapture,!0)}disconnectedCallback(){this.removeEventListener(`click`,this._onClickCapture,!0),this._dragState&&(this._abortDrag(),this._endDrag(this._dragState.pointerId)),super.disconnectedCallback()}firstUpdated(){this.gap!==void 0&&this.style.setProperty(`--group-gap`,this.gap),this.updateComplete.then(()=>{this._propagateAll()})}updated(e){super.updated(e),e.has(`gap`)&&(this.gap===void 0?this.style.removeProperty(`--group-gap`):this.style.setProperty(`--group-gap`,this.gap)),(e.has(`variant`)||e.has(`toggleInteraction`)||e.has(`orientation`)||e.has(`collapsible`)||e.has(`stickyHeaders`))&&this.updateComplete.then(()=>{this._propagateAll()})}_propagateAll(){let e=this.orientation===`horizontal`?`vertical`:`horizontal`;for(let n of this._panels)n.setAttribute(`variant`,this.variant),n.setAttribute(`toggle-interaction`,this.toggleInteraction),n.setAttribute(`orientation`,e),n.toggleAttribute(`sticky-header`,this.stickyHeaders),this.collapsible?n.setAttribute(`collapsible`,``):n.removeAttribute(`collapsible`)}_onSlotChange(){this.updateComplete.then(()=>{this._propagateAll()})}_findDragTarget(e){if(!this.allowReorder)return null;let n=e.composedPath(),r=null,i=!1;for(let e of n){if(!(e instanceof HTMLElement))continue;let n=e.tagName;if(n===`BUTTON`||n===`A`||n===`INPUT`||n===`SELECT`||n===`TEXTAREA`||e.classList.contains(`toolbar`)||e.classList.contains(`close-btn`)||e.classList.contains(`caret-btn`)||e.hasAttribute?.(`slot`)&&e.getAttribute(`slot`)===`toolbar`)return null;n===`IXFX-TITLEBAR`&&(i=!0),!r&&n===`IXFX-PANEL`&&(r=e)}return!r||!i?null:r}_beginDrag(e){let n=this._dragState;if(!(!n||n.active)){try{this.setPointerCapture(e.pointerId)}catch{}n.active=!0,this.setAttribute(`dragging`,``),n.source.setAttribute(`drag-source`,``),n.ghost=this._createGhost(n.source),n.ghost?.move(e.clientX,e.clientY)}}_abortDrag(){let e=this._dragState;e&&(e.source.removeAttribute(`drag-source`),e.gapIndex!==void 0&&(e.gapIndex=void 0,this.requestUpdate()))}_endDrag(e){let n=this._dragState;if(n){n.ghost?.destroy(),n.ghost=null,this.removeAttribute(`dragging`),this._dragState=null,window.removeEventListener(`pointermove`,this._onPointerMove),window.removeEventListener(`pointerup`,this._onPointerUp),window.removeEventListener(`pointercancel`,this._onPointerCancel);try{this.releasePointerCapture(e)}catch{}this.requestUpdate()}}_commitDrag(e,n,r){e.removeAttribute(`drag-source`);let i=(this._panels??[]).filter(n=>n!==e),a=r===void 0?i.length:Math.max(0,Math.min(r,i.length)),o=e.parentNode;if(!o)return;let s=i[a]??null;o.insertBefore(e,s);let c=Array.prototype.indexOf.call(o.children,e);c!==n&&(this._suppressNextClick=!0,this.dispatchEvent(new CustomEvent(`reorder`,{bubbles:!0,composed:!0,detail:{fromIndex:n,toIndex:c,panel:e}})))}_createGhost(e){let n=document.createElement(`span`);if(n.style.display=`inline-flex`,n.style.alignItems=`center`,n.style.padding=`0 var(--space-s, 8px)`,n.style.minWidth=`0`,e.iconName){let r=document.createElement(`ixfx-icon`);r.name=e.iconName,n.appendChild(r)}let r=document.createElement(`span`);r.textContent=(e.title||(e.textContent??``).trim()).slice(0,60),r.style.paddingLeft=`1ch`,r.style.overflow=`hidden`,r.style.textOverflow=`ellipsis`,r.style.whiteSpace=`nowrap`,n.appendChild(r);try{return rT(),Wg({anchor:e,content:n,className:`ixfx-panel-group-ghost`})}catch{return null}}_computeGapIndex(e,n){let r=this._dragState;if(!r)return;let i=(this._panels??[]).filter(e=>e!==r.source);if(i.length===0)return 0;let a=this.orientation===`horizontal`,o=a?e:n;return tT(i.map(e=>{let n=e.getBoundingClientRect();return[a?n.left:n.top,a?n.right:n.bottom]}),o)}_computeCaretStyle(){let e=this._dragState;if(!e?.active||e.gapIndex===void 0)return;let n=(this._panels??[]).filter(n=>n!==e.source);if(n.length===0)return;let r=this.getBoundingClientRect();if(!r)return;let i=Math.max(0,Math.min(e.gapIndex,n.length)),a=i<n.length?n[i].getBoundingClientRect():n[n.length-1].getBoundingClientRect();return this.orientation===`horizontal`?`transform: translate(${(i<n.length?a.left:a.right)-r.left-1}px, 0); width: 2px; height: ${r.height}px;`:`transform: translate(0, ${(i<n.length?a.top:a.bottom)-r.top-1}px); width: ${r.width}px; height: 2px;`}render(){let e=this._computeCaretStyle();return i`
|
|
10624
10640
|
<slot
|
|
10625
10641
|
@toggle=${this._onPanelToggle}
|
|
10626
10642
|
@slotchange=${this._onSlotChange}
|
|
@@ -10684,7 +10700,7 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
|
10684
10700
|
pointer-events: none;
|
|
10685
10701
|
z-index: 1;
|
|
10686
10702
|
}
|
|
10687
|
-
`}};T([d({type:String,reflect:!0})],iT.prototype,`orientation`,void 0),T([d({type:String})],iT.prototype,`variant`,void 0),T([d({type:String,attribute:`toggle-interaction`})],iT.prototype,`toggleInteraction`,void 0),T([d({type:Boolean})],iT.prototype,`collapsible`,void 0),T([d({type:Boolean,attribute:`accordion`,reflect:!0})],iT.prototype,`accordion`,void 0),T([d({type:Boolean,attribute:`allow-reorder`,reflect:!0})],iT.prototype,`allowReorder`,void 0),T([d()],iT.prototype,`gap`,void 0),T([p({slot:``})],iT.prototype,`_panels`,void 0),iT=T([w(`ixfx-panel-group`)],iT);var aT=Object.defineProperty,oT=(e,n)=>{let r={};for(var i in e)aT(r,i,{get:e[i],enumerable:!0});return n||aT(r,Symbol.toStringTag,{value:`Module`}),r};const sT=Math.pow,cT=1/Math.sqrt(2*Math.PI),lT=(e=.4)=>n=>{let r=cT/e,i=-2.5,a=(n-.5)/e;a*=a,i*=a;let o=r*sT(Math.E,i);return o>1?1:o<0?0:o};var uT=oT({arch:()=>yT,backIn:()=>RT,backInOut:()=>VT,backOut:()=>zT,bell:()=>GT,bounceIn:()=>WT,bounceInOut:()=>qT,bounceOut:()=>gT,circIn:()=>IT,circInOut:()=>BT,circOut:()=>LT,cubicIn:()=>OT,cubicOut:()=>kT,elasticIn:()=>HT,elasticInOut:()=>KT,elasticOut:()=>UT,expoIn:()=>MT,expoInOut:()=>FT,expoOut:()=>NT,quadIn:()=>wT,quadInOut:()=>DT,quadOut:()=>TT,quartIn:()=>AT,quartOut:()=>jT,quintIn:()=>_T,quintInOut:()=>PT,quintOut:()=>vT,sineIn:()=>ST,sineInOut:()=>ET,sineOut:()=>CT,smootherstep:()=>xT,smoothstep:()=>bT});const dT=Math.sqrt,fT=Math.pow,pT=Math.cos,mT=Math.PI,hT=Math.sin,gT=e=>{let n=7.5625,r=2.75;return e<1/r?n*e*e:e<2/r?n*(e-=1.5/r)*e+.75:e<2.5/r?n*(e-=2.25/r)*e+.9375:n*(e-=2.625/r)*e+.984375},_T=e=>e*e*e*e*e,vT=e=>1-fT(1-e,5),yT=e=>e*(1-e)*4,bT=e=>e*e*(3-2*e),xT=e=>(e*(e*6-15)+10)*e*e*e,ST=e=>1-pT(e*mT/2),CT=e=>hT(e*mT/2),wT=e=>e*e,TT=e=>1-(1-e)*(1-e),ET=e=>-(pT(mT*e)-1)/2,DT=e=>e<.5?2*e*e:1-fT(-2*e+2,2)/2,OT=e=>e*e*e,kT=e=>1-fT(1-e,3),AT=e=>e*e*e*e,jT=e=>1-fT(1-e,4),MT=e=>e===0?0:fT(2,10*e-10),NT=e=>e===1?1:1-fT(2,-10*e),PT=e=>e<.5?16*e*e*e*e*e:1-fT(-2*e+2,5)/2,FT=e=>e===0?0:e===1?1:e<.5?fT(2,20*e-10)/2:(2-fT(2,-20*e+10))/2,IT=e=>1-dT(1-fT(e,2)),LT=e=>dT(1-fT(e-1,2)),RT=e=>2.70158*e*e*e-1.70158*e*e,zT=e=>1+2.70158*fT(e-1,3)+1.70158*fT(e-1,2),BT=e=>e<.5?(1-dT(1-fT(2*e,2)))/2:(dT(1-fT(-2*e+2,2))+1)/2,VT=e=>{let n=2.5949095;return e<.5?fT(2*e,2)*(7.189819*e-n)/2:(fT(2*e-2,2)*(3.5949095*(e*2-2)+n)+2)/2},HT=e=>{let n=2*mT/3;return e===0?0:e===1?1:-fT(2,10*e-10)*hT((e*10-10.75)*n)},UT=e=>{let n=2*mT/3;return e===0?0:e===1?1:fT(2,-10*e)*hT((e*10-.75)*n)+1},WT=e=>1-gT(1-e),GT=lT(),KT=e=>{let n=2*mT/4.5;return e===0?0:e===1?1:e<.5?-(fT(2,20*e-10)*hT((20*e-11.125)*n))/2:fT(2,-20*e+10)*hT((20*e-11.125)*n)/2+1},qT=e=>e<.5?(1-gT(1-2*e))/2:(1+gT(2*e-1))/2,JT=(e=0,n=0)=>{let r={x:di(e,-1,1,0,1),y:di(e,-1,1,1,0)},i=Rd.interpolate(Math.abs(e),Rd.Empty,r);e!==0&&n>0&&(i=e>0?Rd.interpolate(n,i,{x:0,y:r.x*2}):Rd.interpolate(n,i,{x:r.y*2,y:0}));let a=Ga.cubic(Rd.Empty,Rd.Unit,i,r),o=Ga.interpolator(a);return e=>o(e)},YT=(e,n)=>{D(zr(e,`fn`));let r;return()=>(r===void 0&&(r=Au(n,{clampValue:!0})),e(r()))},XT=(e,n)=>{D(zr(e,`fn`));let r=Fu(),i=Fo(n);if(i===void 0)throw Error(`Param 'duration' not provided`);let a=Pu(i,{timer:r,clampValue:!0});return Lu(e,a)},ZT=(e,n)=>{D(zr(e,`fn`));let r;return()=>(r===void 0&&(r=ju(n,{clampValue:!0})),e(r()))},QT=(e,n)=>{D(zr(e,`fn`));let r=Iu(),i=Pu(n,{timer:r,clampValue:!0});return Lu(e,i)};var $T=oT({Named:()=>uT,create:()=>eE,get:()=>sE,getEasingNames:()=>lE,line:()=>JT,tickEasing:()=>iE,ticks:()=>rE,time:()=>nE,timeEasing:()=>tE});const eE=e=>{let n=aE(e.name??`quintIn`)??e.fn;if(n===void 0)throw Error(`Either 'name' or 'fn' must be set`);if(`duration`in e)return nE(n,e.duration);if(`ticks`in e)return rE(n,e.ticks);throw Error(`Expected 'duration' or 'ticks' in options`)},tE=(e,n)=>XT(aE(e),n),nE=(e,n)=>YT(aE(e),n),rE=(e,n)=>ZT(aE(e),n),iE=(e,n)=>QT(aE(e),n),aE=e=>{let n=typeof e==`function`?e:sE(e);if(n===void 0)throw Error(typeof e==`string`?`Easing function not found: '${e}'`:`Easing function not found`);return n};let oE;const sE=function(e){D(Br(e,`non-empty`,`easingName`));let n=cE().get(e.toLowerCase());if(n===void 0)throw Error(`Easing not found: '${e}'`);return n};function cE(){if(oE===void 0){oE=new Map;for(let[e,n]of Object.entries(uT))oE.set(e.toLowerCase(),n);return oE}return oE}function*lE(){yield*cE().keys()}const uE=[`green`,`yellow`,`red`],dE=new Map;function fE(e){let n=e.join(`\0`);return dE.has(n)||dE.set(n,ag.scale(e,{stepsBetween:99})),dE.get(n)}function pE(e,n){let r=getComputedStyle(e),i=r.getPropertyValue(n).trim(),a=/var\((--[\w-]+)(?:,(.*))?\)/g;for(let e=0;e<5&&i.includes(`var(`);e++)i=i.replace(a,(e,n,i)=>r.getPropertyValue(n).trim()||(i?i.trim():``));return i}function mE(e){return pE(e,`--plot-color`)||`oklch(60% 0.15 140)`}function hE(e){if(!e.trim())return uE;let n=e.split(`,`).map(e=>e.trim()).filter(Boolean);return n.length>=2?n:uE}function gE(e){try{let n=ag.HslSpace.fromCss(e,{scalar:!0});return{h:n.h,s:n.s,l:n.l}}catch{return{h:.39,s:.5,l:.55}}}function _E(e,n){let r=Math.max(0,Math.min(1,e));if(n.easingName)try{return Math.max(0,Math.min(1,$T.get(n.easingName)(r)))}catch{}return n.valueMap?Math.max(0,Math.min(1,n.valueMap(r))):r}function vE(e,n,r){let i=_E(e,r);switch(r.mode){case`fixed`:return{fill:n,opacity:1};case`opacity`:return{fill:n,opacity:Math.max(.04,i)};case`hue`:{let e=gE(n);return{fill:`hsl(${Math.round(i*360)}deg ${Math.round(e.s*100)}% ${Math.round(e.l*100)}%)`,opacity:1}}case`saturation`:{let e=gE(n);return{fill:`hsl(${Math.round(e.h*360)}deg ${Math.round(i*100)}% ${Math.round(e.l*100)}%)`,opacity:1}}case`lightness`:{let e=gE(n);return{fill:`hsl(${Math.round(e.h*360)}deg ${Math.round(e.s*100)}% ${Math.round(i*100)}%)`,opacity:1}}case`scale`:{let e=fE(r.palette.length>=2?r.palette:uE);return{fill:e[Math.min(e.length-1,Math.floor(i*e.length))],opacity:1}}default:return{fill:n,opacity:1}}}function yE(e,n,r){if(r===`opacity`)return{...e,opacity:e.opacity*Math.max(.08,n**.6)};if(r===`desaturation`){let r=gE(e.fill),i=r.s*n;return{fill:`hsl(${Math.round(r.h*360)}deg ${Math.round(i*100)}% ${Math.round(r.l*100)}%)`,opacity:e.opacity}}return e}var bE=class{#e;#t;#n;#r;constructor(e={}){this.values=[],this.#e=hi(),this.#t={min:0,max:0},this.#n=null,this.#r={capacityLimit:100,persistentScaling:!0,fixedRange:null,...e},this.#r.fixedRange!==null&&(this.#n=this.#r.fixedRange)}setRange(e,n){this.#n={min:e,max:n}}unsetRange(){this.#n=null,this.#i()}get isAutoRange(){return this.#n===null}add(e){if(typeof e==`number`)this.values.push(e),this.isAutoRange&&(this.#t=this.#e.seen(e));else if(this.values.push(...e),this.isAutoRange)for(let n of e)this.#t=this.#e.seen(n);this.values.length>this.#r.capacityLimit&&(this.values=this.values.slice(this.values.length-this.#r.capacityLimit),!this.#r.persistentScaling&&this.isAutoRange&&this.#i())}#i(){this.#r.persistentScaling||(this.#e=hi());for(let e=0;e<this.values.length;e++)this.#t=this.#e.seen(this.values[e])}set(e){e.length>this.#r.capacityLimit&&(e=e.slice(e.length-this.#r.capacityLimit)),this.values=e,this.#i()}get range(){return this.#n?this.#n:this.#t}clear(){let e=this.values.length===0;return this.values=[],this.#r.persistentScaling||this.#i(),!e}};function xE(e){if(typeof e==`number`)return!0;if(typeof e!=`string`)return!1;let n=e.trim();return n!==``&&!Number.isNaN(Number(n))}var SE;let CE=!1;function wE(){if(CE)return;CE=!0;let e=document.createElement(`style`);e.textContent=`
|
|
10703
|
+
`}};T([d({type:String,reflect:!0})],iT.prototype,`orientation`,void 0),T([d({type:String})],iT.prototype,`variant`,void 0),T([d({type:String,attribute:`toggle-interaction`})],iT.prototype,`toggleInteraction`,void 0),T([d({type:Boolean})],iT.prototype,`collapsible`,void 0),T([d({type:Boolean,attribute:`accordion`,reflect:!0})],iT.prototype,`accordion`,void 0),T([d({type:Boolean,attribute:`allow-reorder`,reflect:!0})],iT.prototype,`allowReorder`,void 0),T([d({attribute:`sticky-headers`,reflect:!0,converter:{fromAttribute:e=>e!==`false`,toAttribute:e=>e?`true`:`false`}})],iT.prototype,`stickyHeaders`,void 0),T([d()],iT.prototype,`gap`,void 0),T([p({slot:``})],iT.prototype,`_panels`,void 0),iT=T([w(`ixfx-panel-group`)],iT);var aT=Object.defineProperty,oT=(e,n)=>{let r={};for(var i in e)aT(r,i,{get:e[i],enumerable:!0});return n||aT(r,Symbol.toStringTag,{value:`Module`}),r};const sT=Math.pow,cT=1/Math.sqrt(2*Math.PI),lT=(e=.4)=>n=>{let r=cT/e,i=-2.5,a=(n-.5)/e;a*=a,i*=a;let o=r*sT(Math.E,i);return o>1?1:o<0?0:o};var uT=oT({arch:()=>yT,backIn:()=>RT,backInOut:()=>VT,backOut:()=>zT,bell:()=>GT,bounceIn:()=>WT,bounceInOut:()=>qT,bounceOut:()=>gT,circIn:()=>IT,circInOut:()=>BT,circOut:()=>LT,cubicIn:()=>OT,cubicOut:()=>kT,elasticIn:()=>HT,elasticInOut:()=>KT,elasticOut:()=>UT,expoIn:()=>MT,expoInOut:()=>FT,expoOut:()=>NT,quadIn:()=>wT,quadInOut:()=>DT,quadOut:()=>TT,quartIn:()=>AT,quartOut:()=>jT,quintIn:()=>_T,quintInOut:()=>PT,quintOut:()=>vT,sineIn:()=>ST,sineInOut:()=>ET,sineOut:()=>CT,smootherstep:()=>xT,smoothstep:()=>bT});const dT=Math.sqrt,fT=Math.pow,pT=Math.cos,mT=Math.PI,hT=Math.sin,gT=e=>{let n=7.5625,r=2.75;return e<1/r?n*e*e:e<2/r?n*(e-=1.5/r)*e+.75:e<2.5/r?n*(e-=2.25/r)*e+.9375:n*(e-=2.625/r)*e+.984375},_T=e=>e*e*e*e*e,vT=e=>1-fT(1-e,5),yT=e=>e*(1-e)*4,bT=e=>e*e*(3-2*e),xT=e=>(e*(e*6-15)+10)*e*e*e,ST=e=>1-pT(e*mT/2),CT=e=>hT(e*mT/2),wT=e=>e*e,TT=e=>1-(1-e)*(1-e),ET=e=>-(pT(mT*e)-1)/2,DT=e=>e<.5?2*e*e:1-fT(-2*e+2,2)/2,OT=e=>e*e*e,kT=e=>1-fT(1-e,3),AT=e=>e*e*e*e,jT=e=>1-fT(1-e,4),MT=e=>e===0?0:fT(2,10*e-10),NT=e=>e===1?1:1-fT(2,-10*e),PT=e=>e<.5?16*e*e*e*e*e:1-fT(-2*e+2,5)/2,FT=e=>e===0?0:e===1?1:e<.5?fT(2,20*e-10)/2:(2-fT(2,-20*e+10))/2,IT=e=>1-dT(1-fT(e,2)),LT=e=>dT(1-fT(e-1,2)),RT=e=>2.70158*e*e*e-1.70158*e*e,zT=e=>1+2.70158*fT(e-1,3)+1.70158*fT(e-1,2),BT=e=>e<.5?(1-dT(1-fT(2*e,2)))/2:(dT(1-fT(-2*e+2,2))+1)/2,VT=e=>{let n=2.5949095;return e<.5?fT(2*e,2)*(7.189819*e-n)/2:(fT(2*e-2,2)*(3.5949095*(e*2-2)+n)+2)/2},HT=e=>{let n=2*mT/3;return e===0?0:e===1?1:-fT(2,10*e-10)*hT((e*10-10.75)*n)},UT=e=>{let n=2*mT/3;return e===0?0:e===1?1:fT(2,-10*e)*hT((e*10-.75)*n)+1},WT=e=>1-gT(1-e),GT=lT(),KT=e=>{let n=2*mT/4.5;return e===0?0:e===1?1:e<.5?-(fT(2,20*e-10)*hT((20*e-11.125)*n))/2:fT(2,-20*e+10)*hT((20*e-11.125)*n)/2+1},qT=e=>e<.5?(1-gT(1-2*e))/2:(1+gT(2*e-1))/2,JT=(e=0,n=0)=>{let r={x:di(e,-1,1,0,1),y:di(e,-1,1,1,0)},i=Rd.interpolate(Math.abs(e),Rd.Empty,r);e!==0&&n>0&&(i=e>0?Rd.interpolate(n,i,{x:0,y:r.x*2}):Rd.interpolate(n,i,{x:r.y*2,y:0}));let a=Ga.cubic(Rd.Empty,Rd.Unit,i,r),o=Ga.interpolator(a);return e=>o(e)},YT=(e,n)=>{D(zr(e,`fn`));let r;return()=>(r===void 0&&(r=Au(n,{clampValue:!0})),e(r()))},XT=(e,n)=>{D(zr(e,`fn`));let r=Fu(),i=Fo(n);if(i===void 0)throw Error(`Param 'duration' not provided`);let a=Pu(i,{timer:r,clampValue:!0});return Lu(e,a)},ZT=(e,n)=>{D(zr(e,`fn`));let r;return()=>(r===void 0&&(r=ju(n,{clampValue:!0})),e(r()))},QT=(e,n)=>{D(zr(e,`fn`));let r=Iu(),i=Pu(n,{timer:r,clampValue:!0});return Lu(e,i)};var $T=oT({Named:()=>uT,create:()=>eE,get:()=>sE,getEasingNames:()=>lE,line:()=>JT,tickEasing:()=>iE,ticks:()=>rE,time:()=>nE,timeEasing:()=>tE});const eE=e=>{let n=aE(e.name??`quintIn`)??e.fn;if(n===void 0)throw Error(`Either 'name' or 'fn' must be set`);if(`duration`in e)return nE(n,e.duration);if(`ticks`in e)return rE(n,e.ticks);throw Error(`Expected 'duration' or 'ticks' in options`)},tE=(e,n)=>XT(aE(e),n),nE=(e,n)=>YT(aE(e),n),rE=(e,n)=>ZT(aE(e),n),iE=(e,n)=>QT(aE(e),n),aE=e=>{let n=typeof e==`function`?e:sE(e);if(n===void 0)throw Error(typeof e==`string`?`Easing function not found: '${e}'`:`Easing function not found`);return n};let oE;const sE=function(e){D(Br(e,`non-empty`,`easingName`));let n=cE().get(e.toLowerCase());if(n===void 0)throw Error(`Easing not found: '${e}'`);return n};function cE(){if(oE===void 0){oE=new Map;for(let[e,n]of Object.entries(uT))oE.set(e.toLowerCase(),n);return oE}return oE}function*lE(){yield*cE().keys()}const uE=[`green`,`yellow`,`red`],dE=new Map;function fE(e){let n=e.join(`\0`);return dE.has(n)||dE.set(n,ag.scale(e,{stepsBetween:99})),dE.get(n)}function pE(e,n){let r=getComputedStyle(e),i=r.getPropertyValue(n).trim(),a=/var\((--[\w-]+)(?:,(.*))?\)/g;for(let e=0;e<5&&i.includes(`var(`);e++)i=i.replace(a,(e,n,i)=>r.getPropertyValue(n).trim()||(i?i.trim():``));return i}function mE(e){return pE(e,`--plot-color`)||`oklch(60% 0.15 140)`}function hE(e){if(!e.trim())return uE;let n=e.split(`,`).map(e=>e.trim()).filter(Boolean);return n.length>=2?n:uE}function gE(e){try{let n=ag.HslSpace.fromCss(e,{scalar:!0});return{h:n.h,s:n.s,l:n.l}}catch{return{h:.39,s:.5,l:.55}}}function _E(e,n){let r=Math.max(0,Math.min(1,e));if(n.easingName)try{return Math.max(0,Math.min(1,$T.get(n.easingName)(r)))}catch{}return n.valueMap?Math.max(0,Math.min(1,n.valueMap(r))):r}function vE(e,n,r){let i=_E(e,r);switch(r.mode){case`fixed`:return{fill:n,opacity:1};case`opacity`:return{fill:n,opacity:Math.max(.04,i)};case`hue`:{let e=gE(n);return{fill:`hsl(${Math.round(i*360)}deg ${Math.round(e.s*100)}% ${Math.round(e.l*100)}%)`,opacity:1}}case`saturation`:{let e=gE(n);return{fill:`hsl(${Math.round(e.h*360)}deg ${Math.round(i*100)}% ${Math.round(e.l*100)}%)`,opacity:1}}case`lightness`:{let e=gE(n);return{fill:`hsl(${Math.round(e.h*360)}deg ${Math.round(e.s*100)}% ${Math.round(i*100)}%)`,opacity:1}}case`scale`:{let e=fE(r.palette.length>=2?r.palette:uE);return{fill:e[Math.min(e.length-1,Math.floor(i*e.length))],opacity:1}}default:return{fill:n,opacity:1}}}function yE(e,n,r){if(r===`opacity`)return{...e,opacity:e.opacity*Math.max(.08,n**.6)};if(r===`desaturation`){let r=gE(e.fill),i=r.s*n;return{fill:`hsl(${Math.round(r.h*360)}deg ${Math.round(i*100)}% ${Math.round(r.l*100)}%)`,opacity:e.opacity}}return e}var bE=class{#e;#t;#n;#r;constructor(e={}){this.values=[],this.#e=hi(),this.#t={min:0,max:0},this.#n=null,this.#r={capacityLimit:100,persistentScaling:!0,fixedRange:null,...e},this.#r.fixedRange!==null&&(this.#n=this.#r.fixedRange)}setRange(e,n){this.#n={min:e,max:n}}unsetRange(){this.#n=null,this.#i()}get isAutoRange(){return this.#n===null}add(e){if(typeof e==`number`)this.values.push(e),this.isAutoRange&&(this.#t=this.#e.seen(e));else if(this.values.push(...e),this.isAutoRange)for(let n of e)this.#t=this.#e.seen(n);this.values.length>this.#r.capacityLimit&&(this.values=this.values.slice(this.values.length-this.#r.capacityLimit),!this.#r.persistentScaling&&this.isAutoRange&&this.#i())}#i(){this.#r.persistentScaling||(this.#e=hi());for(let e=0;e<this.values.length;e++)this.#t=this.#e.seen(this.values[e])}set(e){e.length>this.#r.capacityLimit&&(e=e.slice(e.length-this.#r.capacityLimit)),this.values=e,this.#i()}get range(){return this.#n?this.#n:this.#t}clear(){let e=this.values.length===0;return this.values=[],this.#r.persistentScaling||this.#i(),!e}};function xE(e){if(typeof e==`number`)return!0;if(typeof e!=`string`)return!1;let n=e.trim();return n!==``&&!Number.isNaN(Number(n))}var SE;let CE=!1;function wE(){if(CE)return;CE=!0;let e=document.createElement(`style`);e.textContent=`
|
|
10688
10704
|
ixfx-tooltip {
|
|
10689
10705
|
display: inline-block;
|
|
10690
10706
|
background: var(--surface-5);
|
package/dist/index.d.ts
CHANGED
|
@@ -2664,6 +2664,11 @@ declare class PanelGroupElement extends LitElement {
|
|
|
2664
2664
|
collapsible: boolean;
|
|
2665
2665
|
accordion: boolean;
|
|
2666
2666
|
allowReorder: boolean;
|
|
2667
|
+
/**
|
|
2668
|
+
* Pin each panel's titlebar to the top (or left, for vertical titlebars) of the scroll area
|
|
2669
|
+
* while its content is in view. On by default; set `sticky-headers="false"` to disable.
|
|
2670
|
+
*/
|
|
2671
|
+
stickyHeaders: boolean;
|
|
2667
2672
|
/** Explicit gap between panels. When unset, `--group-gap` (falling back to `--space-l`) controls the gap. */
|
|
2668
2673
|
gap?: string;
|
|
2669
2674
|
private _panels;
|
package/dist/index.js
CHANGED
|
@@ -11050,6 +11050,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
|
|
|
11050
11050
|
this.collapsible = true;
|
|
11051
11051
|
this.accordion = false;
|
|
11052
11052
|
this.allowReorder = false;
|
|
11053
|
+
this.stickyHeaders = true;
|
|
11053
11054
|
this._dragState = null;
|
|
11054
11055
|
this._suppressNextClick = false;
|
|
11055
11056
|
this._onClickCapture = (event) => {
|
|
@@ -11147,7 +11148,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
|
|
|
11147
11148
|
if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
|
|
11148
11149
|
else this.style.removeProperty(`--group-gap`);
|
|
11149
11150
|
}
|
|
11150
|
-
if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`)) this.updateComplete.then(() => {
|
|
11151
|
+
if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`) || changed.has(`stickyHeaders`)) this.updateComplete.then(() => {
|
|
11151
11152
|
this._propagateAll();
|
|
11152
11153
|
});
|
|
11153
11154
|
}
|
|
@@ -11157,6 +11158,7 @@ let PanelGroupElement = class PanelGroupElement extends LitElement {
|
|
|
11157
11158
|
panel.setAttribute(`variant`, this.variant);
|
|
11158
11159
|
panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
|
|
11159
11160
|
panel.setAttribute(`orientation`, invertedOrientation);
|
|
11161
|
+
panel.toggleAttribute(`sticky-header`, this.stickyHeaders);
|
|
11160
11162
|
if (this.collapsible) panel.setAttribute(`collapsible`, ``);
|
|
11161
11163
|
else panel.removeAttribute(`collapsible`);
|
|
11162
11164
|
}
|
|
@@ -11395,6 +11397,14 @@ __decorate([property({
|
|
|
11395
11397
|
attribute: `allow-reorder`,
|
|
11396
11398
|
reflect: true
|
|
11397
11399
|
})], PanelGroupElement.prototype, "allowReorder", void 0);
|
|
11400
|
+
__decorate([property({
|
|
11401
|
+
attribute: `sticky-headers`,
|
|
11402
|
+
reflect: true,
|
|
11403
|
+
converter: {
|
|
11404
|
+
fromAttribute: (value) => value !== `false`,
|
|
11405
|
+
toAttribute: (value) => value ? `true` : `false`
|
|
11406
|
+
}
|
|
11407
|
+
})], PanelGroupElement.prototype, "stickyHeaders", void 0);
|
|
11398
11408
|
__decorate([property()], PanelGroupElement.prototype, "gap", void 0);
|
|
11399
11409
|
__decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
|
|
11400
11410
|
PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
|
package/dist/panel.d.ts
CHANGED
|
@@ -26,6 +26,11 @@ declare class PanelElement extends LitElement {
|
|
|
26
26
|
hideTitlebar: boolean;
|
|
27
27
|
/** Keep the toolbar visible even when the panel is collapsed. */
|
|
28
28
|
keepToolbar: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Keep the titlebar pinned to the edge of the nearest scrolling ancestor while this panel
|
|
31
|
+
* is in view (top for horizontal titlebars, left for vertical). Normally set by `ixfx-panel-group`.
|
|
32
|
+
*/
|
|
33
|
+
stickyHeader: boolean;
|
|
29
34
|
private _onTitlebarToggle;
|
|
30
35
|
private _onCloseClick;
|
|
31
36
|
protected render(): import("lit").TemplateResult<1>;
|
package/dist/panel.js
CHANGED
|
@@ -17,6 +17,7 @@ let PanelElement = class PanelElement extends LitElement {
|
|
|
17
17
|
this.variant = `titlebar`;
|
|
18
18
|
this.hideTitlebar = false;
|
|
19
19
|
this.keepToolbar = false;
|
|
20
|
+
this.stickyHeader = false;
|
|
20
21
|
}
|
|
21
22
|
_onTitlebarToggle(event) {
|
|
22
23
|
event.stopPropagation();
|
|
@@ -85,6 +86,23 @@ let PanelElement = class PanelElement extends LitElement {
|
|
|
85
86
|
flex-shrink: 0;
|
|
86
87
|
}
|
|
87
88
|
|
|
89
|
+
/* \`overflow: clip\` (unlike \`hidden\`) does not create a scroll container, so the
|
|
90
|
+
titlebar can stick to the outer scroll area. Sticking is bounded by the panel itself. */
|
|
91
|
+
:host([sticky-header]) {
|
|
92
|
+
overflow: clip;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([sticky-header]) ixfx-titlebar {
|
|
96
|
+
position: sticky;
|
|
97
|
+
top: 0;
|
|
98
|
+
z-index: 2;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([sticky-header][orientation="vertical"]) ixfx-titlebar {
|
|
102
|
+
top: auto;
|
|
103
|
+
left: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
88
106
|
.content-wrapper {
|
|
89
107
|
interpolate-size: allow-keywords;
|
|
90
108
|
overflow: hidden;
|
|
@@ -108,7 +126,8 @@ let PanelElement = class PanelElement extends LitElement {
|
|
|
108
126
|
}
|
|
109
127
|
|
|
110
128
|
.content-inner {
|
|
111
|
-
box-shadow: var(--deboss-3);
|
|
129
|
+
box-shadow: var(--panel-content-shadow, var(--deboss-3));
|
|
130
|
+
border: var(--panel-content-border, none);
|
|
112
131
|
min-height: 0;
|
|
113
132
|
min-width: 0;
|
|
114
133
|
overflow: hidden;
|
|
@@ -214,6 +233,11 @@ __decorate([property({
|
|
|
214
233
|
type: Boolean,
|
|
215
234
|
attribute: `keep-toolbar`
|
|
216
235
|
})], PanelElement.prototype, "keepToolbar", void 0);
|
|
236
|
+
__decorate([property({
|
|
237
|
+
type: Boolean,
|
|
238
|
+
attribute: `sticky-header`,
|
|
239
|
+
reflect: true
|
|
240
|
+
})], PanelElement.prototype, "stickyHeader", void 0);
|
|
217
241
|
PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
|
|
218
242
|
//#endregion
|
|
219
243
|
export { PanelElement };
|
package/dist/titlebar.js
CHANGED
|
@@ -157,7 +157,6 @@ let TitlebarElement = class TitlebarElement extends LitElement {
|
|
|
157
157
|
|
|
158
158
|
.title-text {
|
|
159
159
|
flex: 1;
|
|
160
|
-
padding-left: 1ch;
|
|
161
160
|
font-family: var(--font-family);
|
|
162
161
|
font-size: var(--text-m);
|
|
163
162
|
font-weight: var(--font-weight-bold, 600);
|
|
@@ -175,7 +174,6 @@ let TitlebarElement = class TitlebarElement extends LitElement {
|
|
|
175
174
|
|
|
176
175
|
:host([orientation="vertical"]) .title-text {
|
|
177
176
|
writing-mode: vertical-rl;
|
|
178
|
-
padding-left: 0;
|
|
179
177
|
padding-bottom: 1ch;
|
|
180
178
|
text-orientation: mixed;
|
|
181
179
|
transform: rotate(180deg);
|
package/docs-user/index.json
CHANGED
package/docs-user/panel.md
CHANGED
|
@@ -189,6 +189,8 @@ Use the `collapsed` attribute to start the panel in collapsed state:
|
|
|
189
189
|
| `--transition` | `0.15s ease-out` | Animation transition duration |
|
|
190
190
|
| `--panel-width` | `auto` | Width for vertical panels |
|
|
191
191
|
| `--panel-height` | `auto` | Height for horizontal panels |
|
|
192
|
+
| `--panel-content-shadow`| `var(--deboss-3)` | `box-shadow` of the content area (the inset 3D effect). `none` removes it |
|
|
193
|
+
| `--panel-content-border`| `none` | `border` of the content area |
|
|
192
194
|
| `--prominence-idle-opacity` | `0.6` | Opacity of caret when idle |
|
|
193
195
|
| `--prominence-tickled-opacity` | `1.0` | Opacity of caret on hover |
|
|
194
196
|
|
|
@@ -215,6 +217,7 @@ A container component that manages multiple panels with flexible open behavior.
|
|
|
215
217
|
| `collapsible` | boolean | `true` | Collapse behaviour propagated to child panels |
|
|
216
218
|
| `gap` | string | (unset) | Explicit gap between panels; sets `--group-gap` when provided |
|
|
217
219
|
| `orientation` | `'horizontal'` \| `'vertical'` | `'horizontal'` | Layout direction of the group |
|
|
220
|
+
| `sticky-headers` | boolean (`"false"` disables) | `true` | Pin each panel's titlebar to the scroll area edge (top, or left for vertical titlebars) |
|
|
218
221
|
| `toggle-interaction` | `'implicit'` \| `'explicit'` \| `'disabled'` | `'implicit'` | Toggle behavior applied to all child panels |
|
|
219
222
|
| `variant` | `'titlebar'` \| `'midline'` \| `'tree'` | `'titlebar'` | Visual style applied to all child panels |
|
|
220
223
|
|
|
@@ -255,6 +258,12 @@ By default, multiple panels can be open at the same time. Add `accordion` to res
|
|
|
255
258
|
</ixfx-panel-group>
|
|
256
259
|
```
|
|
257
260
|
|
|
261
|
+
### Sticky headers
|
|
262
|
+
|
|
263
|
+
Panels in a group keep their titlebar pinned to the nearest scrolling ancestor while the panel is in view, so you don't lose track of which panel you're in. The titlebar stops sticking when the panel ends. Horizontal titlebars stick to the top, vertical titlebars to the left. Disable with `sticky-headers="false"`. A standalone `ixfx-panel` can opt in with `sticky-header`.
|
|
264
|
+
|
|
265
|
+
Sticking activates `overflow: clip` on the panel instead of `overflow: hidden`.
|
|
266
|
+
|
|
258
267
|
### Reordering
|
|
259
268
|
|
|
260
269
|
Set `allow-reorder` to let users rearrange panels by dragging their titlebars (pointer-only in v1; keyboard reorder is not included):
|
|
@@ -294,6 +303,18 @@ ixfx-panel-group {
|
|
|
294
303
|
|
|
295
304
|
Alternatively set the `gap` property/attribute for the same effect (it mirrors its value into `--group-gap`).
|
|
296
305
|
|
|
306
|
+
### Content area styling
|
|
307
|
+
|
|
308
|
+
Inherited custom properties, so setting them on a group styles all its panels. To remove the inset effect or use your own:
|
|
309
|
+
|
|
310
|
+
```css
|
|
311
|
+
ixfx-panel-group {
|
|
312
|
+
--panel-content-shadow: none;
|
|
313
|
+
--panel-content-border: 1px solid var(--surface-4);
|
|
314
|
+
}
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
|
|
297
318
|
### Group-propagated properties
|
|
298
319
|
|
|
299
320
|
When you set `variant`, `toggle-interaction` or `collapsible` on the group, those values are automatically applied to all child panels that don't have an explicit value set. This simplifies declaration when all panels in a group share the same styling:
|