@ixfx/components 0.5.7 → 0.5.9

package/bundle/index.js

@@ -1121,6 +1121,28 @@ const themeFallbacks = i$3`
   }
 `;
 //#endregion
+//#region src/styles/popup.ts
+/**
+* Canonical surface styles for floating popup elements (menus, dropdowns,
+* colour picker, tooltips). Apply by adding `popupSurfaceStyles` to a
+* component's `static styles` array and the class `popup-surface` to the
+* popup container element - or to the host itself (via `this.classList.add`)
+* when the component's host element is the popup container.
+*
+* Intentionally omitted (remain per-component): positioning, padding,
+* dimensions, z-index, and open/close animations.
+*/
+const popupSurfaceStyles = i$3`
+  .popup-surface,
+  :host(.popup-surface) {
+    background: var(--surface-5);
+    border: 1px solid var(--surface-6);
+    border-radius: var(--radius-l);
+    box-shadow: var(--shadow-m);
+    color: var(--surface-5-text);
+  }
+`;
+//#endregion
 //#region src/util/custom-elements.ts
 function getRegistry() {
 	if (typeof customElements === `undefined`) return void 0;
@@ -1555,7 +1577,7 @@ let AcTextElement = class AcTextElement extends i {
 		const showEmpty = !this._isLoading && this._results.length === 0;
 		return b`
       <div
-        class="popup"
+        class="popup popup-surface"
         popover="manual"
         role="listbox"
         aria-label="Suggestions"
@@ -1595,6 +1617,7 @@ let AcTextElement = class AcTextElement extends i {
 		this.styles = [
 			themeFallbacks,
 			tickledStyles,
+			popupSurfaceStyles,
 			i$3`
     :host {
       display: block;
@@ -3085,6 +3108,9 @@ const buttonStyles = i$3`
 
   .button-label {
     white-space: nowrap;
+  }
+
+  :host([has-icon]) .button-label {
     display: var(--ixfx-button-hide-label, inline);
   }
 
@@ -3113,6 +3139,7 @@ let ButtonElement = class ButtonElement extends i {
 		this.disabled = false;
 		this.hideIcon = false;
 		this.hideLabel = false;
+		this.hasIcon = false;
 		this.subtle = false;
 	}
 	_renderIcon() {
@@ -3122,6 +3149,7 @@ let ButtonElement = class ButtonElement extends i {
 		return b`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
 	}
 	render() {
+		this.hasIcon = !this.hideIcon && !!this.icon;
 		const label = this.hideLabel ? A : b`<span class="button-label"><slot></slot></span>`;
 		return b`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
 	}
@@ -3141,6 +3169,11 @@ __decorate([property({
 	attribute: `hide-label`,
 	reflect: true
 })], ButtonElement.prototype, "hideLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `has-icon`,
+	reflect: true
+})], ButtonElement.prototype, "hasIcon", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -3482,28 +3515,6 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
-//#region src/styles/popup.ts
-/**
-* Canonical surface styles for floating popup elements (menus, dropdowns,
-* colour picker, tooltips). Apply by adding `popupSurfaceStyles` to a
-* component's `static styles` array and the class `popup-surface` to the
-* popup container element - or to the host itself (via `this.classList.add`)
-* when the component's host element is the popup container.
-*
-* Intentionally omitted (remain per-component): positioning, padding,
-* dimensions, z-index, and open/close animations.
-*/
-const popupSurfaceStyles = i$3`
-  .popup-surface,
-  :host(.popup-surface) {
-    background: var(--surface-5);
-    border: 1px solid var(--surface-6);
-    border-radius: var(--radius-l);
-    box-shadow: var(--shadow-m);
-    color: var(--surface-5-text);
-  }
-`;
-//#endregion
 //#region src/menu/menu-container.ts
 let MenuContainer = class MenuContainer extends i {
 	constructor(..._args) {
@@ -7181,6 +7192,10 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	clearSelection() {
 		if (this.root) this.#setSelected(this.root);
 	}
+	/** Not implemented on crumb-navigation. */
+	selectAll() {}
+	/** Not implemented on crumb-navigation. */
+	deselectAll() {}
 	getNodes() {
 		if (!this.root) return [];
 		const result = [];
@@ -10127,11 +10142,10 @@ let PanelElement = class PanelElement extends i {
 
     .content-inner {
       box-shadow: var(--deboss-3);
-
       min-height: 0;
       min-width: 0;
       overflow: hidden;
-      padding: var(--space-m);
+      padding: var(--space-s);
       transform: translateY(-100%);
       transition: transform var(--transition, 0.2s ease-out);
     }
@@ -10473,6 +10487,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.interactionMode = `standard`;
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
+		this.registry = void 0;
 		this._expandedKeys = /* @__PURE__ */ new Set();
 		this.tickled = new TickledController(this, {
 			getItems: () => {
@@ -10490,6 +10505,11 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#onKeyDown = (event) => {
 			const nodes = this.#getAllNodes();
 			if (nodes.length === 0) return;
+			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
+				event.preventDefault();
+				this.selectAll();
+				return;
+			}
 			if ([
 				`ArrowDown`,
 				`ArrowUp`,
@@ -10607,6 +10627,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#pendingController;
 	#modelUnsubscribe;
 	#anchor;
+	#ownedRegistry;
 	#config;
 	updated(changedProps) {
 		if (changedProps.has(`root`) && this.root) {
@@ -10646,11 +10667,31 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute(`data-input-mode`, `mouse`);
+		const registry = this.#ownedRegistry = createCommandRegistry();
+		registry.register({
+			id: `select-all`,
+			label: `Select All`,
+			description: `Select all visible items`,
+			execute: () => this.selectAll()
+		});
+		registry.register({
+			id: `deselect-all`,
+			label: `Deselect All`,
+			description: `Clear all selection`,
+			execute: () => this.deselectAll()
+		});
+		this.registry = registry;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
+		if (this.#ownedRegistry) {
+			this.#ownedRegistry.unregister(`select-all`);
+			this.#ownedRegistry.unregister(`deselect-all`);
+			this.#ownedRegistry = void 0;
+			this.registry = void 0;
+		}
 	}
 	getConfig() {
 		return { ...this.#config };
@@ -10686,6 +10727,32 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
+	selectAll() {
+		const prev = new Set(this._selectedNodes);
+		if (this.interactionMode === `checked`) for (const { node } of this.#getAllNodes()) {
+			if (!this.#canSelect(node)) continue;
+			this.#applyCheckedToggle(node, true);
+		}
+		else {
+			for (const { node } of this.#getAllNodes()) {
+				if (!this.#canSelect(node)) continue;
+				this._selectedNodes.add(node);
+			}
+			this.selectedNode = [...this._selectedNodes].at(-1);
+		}
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselectAll() {
+		const prev = new Set(this._selectedNodes);
+		if (this.interactionMode === `checked`) for (const { node } of this.#getAllNodes()) {
+			if (!this.#canSelect(node)) continue;
+			this.#applyCheckedToggle(node, false);
+		}
+		else this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
 	navigateTo(keys) {
 		if (!this.root?.children) return false;
 		this.#abortPending();
@@ -11356,6 +11423,7 @@ __decorate([property({
 	type: Boolean,
 	attribute: `disable-keyboard-navigation`
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "registry", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
@@ -11401,18 +11469,33 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `;
 		if (this.interactionMode === `checked`) {
 			const state = computeCheckboxState$1(node, this._selectedNodes);
-			return b`
-        <input
-          type="checkbox"
-          class="tree-checkbox"
-          .checked=${state === `checked`}
-          .indeterminate=${state === `indeterminate`}
-          aria-label="Select ${node.item.label}"
-          @click=${(e) => this._handleCheckboxClick(e, node, depth)}
-        />${caretAndLabel}`;
+			return b`${this.#renderCheckbox(node, depth, state)}${caretAndLabel}`;
 		}
 		return caretAndLabel;
 	}
+	#renderCheckbox(node, depth, state) {
+		const onClick = (e) => this._handleCheckboxClick(e, node, depth);
+		if (this.checkboxRenderer) return b`
+        <span
+          class="tree-checkbox tree-checkbox-custom"
+          part="checkbox"
+          role="checkbox"
+          tabindex="-1"
+          aria-checked=${state === `indeterminate` ? `mixed` : state === `checked` ? `true` : `false`}
+          aria-label="Select ${node.item.label}"
+          @click=${onClick}
+        >${this.checkboxRenderer(state)}</span>`;
+		return b`
+      <input
+        type="checkbox"
+        class="tree-checkbox"
+        part="checkbox"
+        .checked=${state === `checked`}
+        .indeterminate=${state === `indeterminate`}
+        aria-label="Select ${node.item.label}"
+        @click=${onClick}
+      />`;
+	}
 	_renderNode(node, depth) {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
@@ -11491,6 +11574,17 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
         pointer-events: auto;
       }
 
+      .tree-checkbox-custom {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        /* Reserves a click target even when the renderer returns empty content
+           (e.g. the "nothing when unchecked" subtle style) — without an explicit
+           size the empty span collapses to 0×0 and becomes unclickable. */
+        width: var(--tree-checkbox-size, 14px);
+        height: var(--tree-checkbox-size, 14px);
+      }
+
       /* In checked mode the checkbox communicates selection state —
          suppress the row highlight so it doesn't double-signal */
       :host([interaction-mode="checked"]) .item.selected {
@@ -11512,6 +11606,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		];
 	}
 };
+__decorate([property({ attribute: false })], TreeListElement.prototype, "checkboxRenderer", void 0);
 TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
 //#endregion
 //#region src/grouped-item-lister/tree-list-adapter.ts
@@ -11689,6 +11784,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		this._searchVisible = false;
 		this._searchQuery = ``;
 		this.#customWrappers = /* @__PURE__ */ new Map();
+		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.tickled = new TickledController(this, {
 			getItems: () => this._getVisibleItems().map((el) => ({
 				id: el,
@@ -11797,6 +11893,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	#search;
 	#selectionAnchor;
 	#customWrappers;
+	#wrappedElements;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -11923,6 +12020,20 @@ let VerticalListElement = class VerticalListElement extends i {
 	selectAll() {
 		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
 	}
+	*selectedFilter(kind) {
+		const wanted = (el) => {
+			switch (kind) {
+				case `selected`: return el.hasAttribute(`data-selected`);
+				case `checked`: return el.hasAttribute(`data-checked`);
+				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
+			}
+		};
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
+			if (el.hidden) continue;
+			if (wanted(el)) yield el;
+		}
+	}
 	_replaceSelection(item) {
 		if (this.selectionMode === `none`) return;
 		if (!this._isCheckable(item)) return;
@@ -12028,6 +12139,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	}
 	_getVisibleItems() {
 		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+			if (this.#wrappedElements.has(el)) return false;
 			if (el.hidden) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
@@ -12039,6 +12151,7 @@ let VerticalListElement = class VerticalListElement extends i {
 	}
 	_syncItemStates() {
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
 			const item = this.#customWrappers.get(el) ?? el;
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
@@ -12061,9 +12174,10 @@ let VerticalListElement = class VerticalListElement extends i {
 			if (key !== null) wrapper.setAttribute(`data-key`, key);
 			if (label !== null) wrapper.setAttribute(`data-search-label`, label);
 			inner.removeAttribute(`data-list-item`);
-			this.insertBefore(wrapper, inner);
 			wrapper.appendChild(inner);
+			this.replaceChild(wrapper, inner);
 			this.#customWrappers.set(wrapper, inner);
+			this.#wrappedElements.add(inner);
 		}
 		else {
 			for (const [wrapper, inner] of this.#customWrappers) {
@@ -12073,6 +12187,7 @@ let VerticalListElement = class VerticalListElement extends i {
 				wrapper.remove();
 			}
 			this.#customWrappers.clear();
+			this.#wrappedElements.clear();
 		}
 		for (const el of this.querySelectorAll(`li`)) {
 			const existing = el.querySelector(`.ixfx-list-checkbox`);
@@ -15960,6 +16075,10 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		if (prev.size > 0) this.#dispatchSelectEvent(prev);
 		this.requestUpdate();
 	}
+	/** Not implemented on miller-list. */
+	selectAll() {}
+	/** Not implemented on miller-list. */
+	deselectAll() {}
 	/**
 	* Select or deselect a single node by key.
 	* In `checked` interactionMode this also recursively selects/deselects all loaded descendants.