inviton-powerduck 0.0.225 → 0.0.227

package/common/css/ladda-themeless-zoomin.min.css

@@ -1,89 +1,89 @@
-/*! Ladda http://lab.hakim.se/ladda MIT licensed Copyright (C) 2016 Hakim El Hattab, http://hakim.se ....Lightweight adaptation for Inviton API needs*/
-.ladda-button {
-    position: relative;
-}
-.ladda-button .ladda-spinner {
-    position: absolute;
-    z-index: 2;
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    top: 50%;
-    margin-top: 0;
-    opacity: 0;
-    pointer-events: none;
-}
-.ladda-button .ladda-label {
-    position: relative;
-    z-index: 3;
-}
-.ladda-button .ladda-progress {
-    position: absolute;
-    width: 0;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background: rgba(0, 0, 0, 0.2);
-    visibility: hidden;
-    opacity: 0;
-    -webkit-transition: 0.1s linear all !important;
-    -moz-transition: 0.1s linear all !important;
-    -ms-transition: 0.1s linear all !important;
-    -o-transition: 0.1s linear all !important;
-    transition: 0.1s linear all !important;
-}
-.ladda-button[data-loading] .ladda-progress {
-    opacity: 1;
-    visibility: visible;
-}
-.ladda-button,
-.ladda-button .ladda-label,
-.ladda-button .ladda-spinner {
-    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-    -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-    -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-    -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-}
-.ladda-button[data-style="zoom-in"],
-.ladda-button[data-style="zoom-in"] .ladda-label,
-.ladda-button[data-style="zoom-in"] .ladda-spinner {
-    -webkit-transition: 0.3s ease all !important;
-    -moz-transition: 0.3s ease all !important;
-    -ms-transition: 0.3s ease all !important;
-    -o-transition: 0.3s ease all !important;
-    transition: 0.3s ease all !important;
-}
-.ladda-button[data-style="zoom-in"] {
-    overflow: hidden;
-}
-.ladda-button[data-style="zoom-in"] .ladda-spinner {
-    left: 50%;
-    margin-left: -16px;
-    -webkit-transform: scale(0.2);
-    -moz-transform: scale(0.2);
-    -ms-transform: scale(0.2);
-    -o-transform: scale(0.2);
-    transform: scale(0.2);
-}
-.ladda-button[data-style="zoom-in"] .ladda-label {
-    position: relative;
-    display: inline-block;
-}
-.ladda-button[data-style="zoom-in"][data-loading] .ladda-label {
-    opacity: 0;
-    -webkit-transform: scale(2.2);
-    -moz-transform: scale(2.2);
-    -ms-transform: scale(2.2);
-    -o-transform: scale(2.2);
-    transform: scale(2.2);
-}
-.ladda-button[data-style="zoom-in"][data-loading] .ladda-spinner {
-    opacity: 1;
-    margin-left: 0;
-    -webkit-transform: none;
-    -moz-transform: none;
-    -ms-transform: none;
-    -o-transform: none;
-    transform: none;
-}
+/*! Ladda http://lab.hakim.se/ladda MIT licensed Copyright (C) 2016 Hakim El Hattab, http://hakim.se ....Lightweight adaptation for Inviton API needs*/
+.ladda-button {
+    position: relative;
+}
+.ladda-button .ladda-spinner {
+    position: absolute;
+    z-index: 2;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    top: 50%;
+    margin-top: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+.ladda-button .ladda-label {
+    position: relative;
+    z-index: 3;
+}
+.ladda-button .ladda-progress {
+    position: absolute;
+    width: 0;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.2);
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: 0.1s linear all !important;
+    -moz-transition: 0.1s linear all !important;
+    -ms-transition: 0.1s linear all !important;
+    -o-transition: 0.1s linear all !important;
+    transition: 0.1s linear all !important;
+}
+.ladda-button[data-loading] .ladda-progress {
+    opacity: 1;
+    visibility: visible;
+}
+.ladda-button,
+.ladda-button .ladda-label,
+.ladda-button .ladda-spinner {
+    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+}
+.ladda-button[data-style="zoom-in"],
+.ladda-button[data-style="zoom-in"] .ladda-label,
+.ladda-button[data-style="zoom-in"] .ladda-spinner {
+    -webkit-transition: 0.3s ease all !important;
+    -moz-transition: 0.3s ease all !important;
+    -ms-transition: 0.3s ease all !important;
+    -o-transition: 0.3s ease all !important;
+    transition: 0.3s ease all !important;
+}
+.ladda-button[data-style="zoom-in"] {
+    overflow: hidden;
+}
+.ladda-button[data-style="zoom-in"] .ladda-spinner {
+    left: 50%;
+    margin-left: -16px;
+    -webkit-transform: scale(0.2);
+    -moz-transform: scale(0.2);
+    -ms-transform: scale(0.2);
+    -o-transform: scale(0.2);
+    transform: scale(0.2);
+}
+.ladda-button[data-style="zoom-in"] .ladda-label {
+    position: relative;
+    display: inline-block;
+}
+.ladda-button[data-style="zoom-in"][data-loading] .ladda-label {
+    opacity: 0;
+    -webkit-transform: scale(2.2);
+    -moz-transform: scale(2.2);
+    -ms-transform: scale(2.2);
+    -o-transform: scale(2.2);
+    transform: scale(2.2);
+}
+.ladda-button[data-style="zoom-in"][data-loading] .ladda-spinner {
+    opacity: 1;
+    margin-left: 0;
+    -webkit-transform: none;
+    -moz-transform: none;
+    -ms-transform: none;
+    -o-transform: none;
+    transform: none;
+}

package/common/utils/cookie.ts

@@ -1,6 +1,6 @@
 import { Temporal } from '@js-temporal/polyfill';
-import { DomainHelper } from './domain-helper';
 import { globalState } from '../../app/global-state';
+import { DomainHelper } from './domain-helper';
 
 // Cookie manipulation abstraction
 export class CookieProvider {
@@ -16,9 +16,9 @@ export class CookieProvider {
 		value: string,
 		expiration?: Temporal.PlainDateTime,
 	) {
-        if (!globalState.windowExists) {
-            return;
-        }
+		if (!globalState.windowExists) {
+			return;
+		}
 
 		let domain = DomainHelper.getCookieDomain();
 		if (domain.length > 0) {
@@ -27,7 +27,9 @@ export class CookieProvider {
 
 		let realExpiration;
 		if (expiration != null) {
-			realExpiration = expiration.toZonedDateTime('UTC').epochMilliseconds;
+			const instant = expiration.toZonedDateTime('UTC').toInstant();
+			// eslint-disable-next-line no-restricted-syntax
+			realExpiration = new Date(instant.epochMilliseconds).toUTCString();
 		} else {
 			realExpiration = '';
 		}
@@ -41,9 +43,9 @@ export class CookieProvider {
 	 * @param name  Name of the cookie
 	 */
 	static read(name: string): string {
-        if (!globalState.windowExists) {
-            return null;
-        }
+		if (!globalState.windowExists) {
+			return null;
+		}
 
 		name = `${name}=`;
 		const ca = document.cookie.split(';');

package/components/dropdown/css/smart-dropdown.scss

@@ -1,4 +1,4 @@
-.gopass-filter-wrapper {
+.smart-dropdown-wrapper {
     /* ... [Previous variables and base styles] ... */
     --bs-blue: #0d6efd;
     --bs-btn-bg: #0d6efd;
@@ -237,6 +237,15 @@
         min-height: 150px;
     }
 
+    .list-header {
+        padding: 12px 16px;
+        font-size: 0.85rem;
+        color: #6c757d;
+        background: #f8f9fa;
+        border-bottom: 1px solid #e9ecef;
+        font-style: italic;
+    }
+
     .list-group-label {
         padding: 8px 16px;
         font-size: 0.75rem;
@@ -257,7 +266,10 @@
     }
 
     .list-item-custom-container {
+        padding: 8px 16px;
         cursor: pointer;
+        display: flex;
+        align-items: center;
         border-bottom: 1px solid #f8f9fa;
         transition: background-color 0.15s;
 
@@ -376,7 +388,7 @@
 
     /* When in 'input' mode on Desktop: Hide internal search header and footer */
     @media (min-width: 769px) {
-        &.mode-input {
+        	&.mode-input {
             .internal-search-header {
                 display: none !important;
             }
@@ -407,7 +419,7 @@
 
         /* On Mobile, always show the internal search/footer even if in 'input' mode */
         /* because the external input is behind the modal */
-        &.mode-input {
+        	&.mode-input {
             .internal-search-header {
                 display: flex !important;
             }

package/components/dropdown/smart-dropdown.tsx

@@ -49,6 +49,21 @@ export interface SmartDropdownSection {
 	items: SmartDropdownItem[];
 }
 
+/** Callback to change selection state of an item */
+export type SelectionChangedCallback = (forceSelected?: boolean) => void;
+
+/** Arguments passed to customListItemRender */
+export interface CustomListItemRenderArgs {
+	/** The item being rendered */
+	item: SmartDropdownItem;
+	/** Whether the item is currently selected */
+	isSelected: boolean;
+	/** Callback to change selection state. Call with true to select, false to deselect, or undefined to toggle */
+	selectionChanged: SelectionChangedCallback;
+	/** Renders the item using the default SmartDropdown renderer */
+	baseRender: () => VNode;
+}
+
 interface SmartDropdownArgs extends FormItemWrapperArgs {
 	categories: SmartDropdownCategoryItem[];
 	customSections: SmartDropdownSection[];
@@ -60,9 +75,16 @@ interface SmartDropdownArgs extends FormItemWrapperArgs {
 	buttonLayout: 'footer' | 'inline';
 	searchMode: 'dropdown' | 'input';
 	customTriggerScope?: 'mobile' | 'desktop' | 'all';
-	customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	/** Custom renderer for list items. Receives args object with item, isSelected, selectionChanged, and baseRender */
+	customListItemRender?: (args: CustomListItemRenderArgs) => VNode;
 	customTriggerRender?: () => VNode;
 	changed: (e: SmartDropdownItem[]) => void;
+	/** Called when an item is clicked. Return true to prevent default selection behavior. */
+	onItemClick?: (item: SmartDropdownItem) => boolean;
+	/** Delay in ms before showing the loading indicator. Default 650ms. */
+	loadingIndicatorDelay?: number;
+	/** Optional header text shown at the top of the list to guide users. */
+	listHeader?: string;
 }
 
 @Component
@@ -99,16 +121,21 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 	@Prop({ type: String, default: 'footer' }) readonly buttonLayout!: 'footer' | 'inline';
 	@Prop({ type: String, default: 'dropdown' }) readonly searchMode!: 'dropdown' | 'input';
 	@Prop({ type: String, default: 'all' }) readonly customTriggerScope!: 'mobile' | 'desktop' | 'all';
-	@Prop({ type: Function }) readonly customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	@Prop({ type: Function }) readonly customListItemRender?: (args: CustomListItemRenderArgs) => VNode;
 	@Prop({ type: Function }) readonly customTriggerRender?: () => VNode;
 	@Prop() readonly changed: (e: SmartDropdownItem[]) => void;
+	@Prop({ type: Function }) readonly onItemClick?: (item: SmartDropdownItem) => boolean;
+	@Prop({ type: Number, default: 650 }) readonly loadingIndicatorDelay!: number;
+	@Prop({ type: String }) readonly listHeader?: string;
 
 	// --- State ---
 	isOpen = false;
 	searchQuery = '';
 	searchResults: SmartDropdownSearchResultItem[] = [];
 	isLoading = false;
+	isSearchPending = false;
 	debounceTimer: number | null = null;
+	loadingIndicatorTimer: number | null = null;
 	focusedIndex = -1;
 	triggerInputValue = '';
 
@@ -396,39 +423,69 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 			clearTimeout(this.debounceTimer);
 		}
 
+		if (this.loadingIndicatorTimer) {
+			clearTimeout(this.loadingIndicatorTimer);
+			this.loadingIndicatorTimer = null;
+		}
+
 		if (val.trim().length === 0) {
 			this.isLoading = false;
+			this.isSearchPending = false;
 			this.searchResults = [];
 			return;
 		}
 
-		this.isLoading = true;
+		this.isSearchPending = true;
 		this.debounceTimer = window.setTimeout(async () => {
+			// Start timer to show loading indicator after delay
+			this.loadingIndicatorTimer = window.setTimeout(() => {
+				this.isLoading = true;
+			}, this.loadingIndicatorDelay);
 			try {
 				this.searchResults = await this.searchData(val);
 			} catch (err) {
 				this.searchResults = [];
 			} finally {
+				if (this.loadingIndicatorTimer) {
+					clearTimeout(this.loadingIndicatorTimer);
+					this.loadingIndicatorTimer = null;
+				}
+
 				this.isLoading = false;
+				this.isSearchPending = false;
 			}
 		}, 800);
 	}
 
-	handleItemClick(item: SmartDropdownItem) {
-		const isSelected = this.isSelected(item);
+	handleItemClick(item: SmartDropdownItem, forceSelected?: boolean) {
+		// Allow parent to intercept and handle the click
+		if (this.onItemClick?.(item)) {
+			this.closeDropdown();
+			return;
+		}
+
+		const isCurrentlySelected = this.isSelected(item);
+		// Use forceSelected if provided, otherwise toggle based on current state
+		const shouldBeSelected = forceSelected !== undefined ? forceSelected : !isCurrentlySelected;
+
 		let newSelection: SmartDropdownItem[] = [];
 
 		if (this.multiselect) {
-			if (isSelected) {
-				newSelection = this.value.filter(i => i.id !== item.id);
-			} else {
+			if (shouldBeSelected && !isCurrentlySelected) {
+				// Add item
 				newSelection = [
 					...this.value,
 					item,
 				];
+			} else if (!shouldBeSelected && isCurrentlySelected) {
+				// Remove item
+				newSelection = this.value.filter(i => i.id !== item.id);
+			} else {
+				// No change needed
+				newSelection = [...this.value];
 			}
 		} else {
-			newSelection = [item];
+			newSelection = shouldBeSelected ? [item] : [];
 			this.closeDropdown();
 		}
 
@@ -546,6 +603,11 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		// A. Search Results
 		if (this.isSearchActive) {
 			if (this.searchResults.length === 0) {
+				// Show loading if search is pending or in progress, otherwise show no results
+				if (this.isSearchPending) {
+					return <div class="loading-state" role="status">{SmartDropdownResources.loadingTextLong}</div>;
+				}
+
 				return <div class="empty-state" role="status">{SmartDropdownResources.noResultsSearch}</div>;
 			}
 
@@ -567,6 +629,11 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 
 		return (
 			<div class="list-wrapper">
+				{/* 0. List Header */}
+				{this.listHeader && (
+					<div class="list-header" role="note">{this.listHeader}</div>
+				)}
+
 				{/* 1. Pinned Selected */}
 				{hasPinned && (
 					<div class="list-group section-pinned" role="group" aria-label={SmartDropdownResources.selectedTitle}>
@@ -600,17 +667,52 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		);
 	}
 
+	/** Renders the default list item content (without wrapper) */
+	renderDefaultListItemContent(item: SmartDropdownItem, isSelected: boolean): VNode {
+		const searchResult = item as SmartDropdownSearchResultItem;
+		const hasSubtitle = !!searchResult.subtitle;
+		const hasImage = !!searchResult.imageUrl;
+		const showCheckbox = this.multiselect && !this.isSearchActive && !hasImage;
+
+		return (
+			<>
+				{hasImage
+					? (
+							<img src={searchResult.imageUrl} class="result-image" alt="" />
+						)
+					: (
+							showCheckbox && <div class={`checkbox-visual ${isSelected ? 'checked' : ''}`} aria-hidden="true"></div>
+						)}
+
+				<div class="item-content">
+					<span class="item-text">{item.text}</span>
+					{hasSubtitle && (
+						<span class="item-subtitle">{searchResult.subtitle}</span>
+					)}
+				</div>
+			</>
+		);
+	}
+
 	renderListItem(item: SmartDropdownItem, index: number) {
 		const isSelected = this.isSelected(item);
 		const isFocused = this.focusedIndex === index;
 		const uniqueId = `${this.uid}-option-${index}`;
 
+		// Create selectionChanged callback for this item
+		const selectionChanged: SelectionChangedCallback = (forceSelected?: boolean) => {
+			this.handleItemClick(item, forceSelected);
+		};
+
+		// Create baseRender function that returns the default rendering
+		const baseRender = (): VNode => this.renderDefaultListItemContent(item, isSelected);
+
 		// Wrapper properties for accessibility
 		const wrapperProps = {
 			'id': uniqueId,
 			'class': {
-				'list-item-custom-container': !!this.customSectionRender,
-				'list-item': !this.customSectionRender,
+				'list-item-custom-container': !!this.customListItemRender,
+				'list-item': !this.customListItemRender,
 				'selected': isSelected,
 				'focused': isFocused, // Visual focus state
 				'no-checkbox': !this.multiselect,
@@ -622,36 +724,18 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		};
 
 		// 1. Custom Renderer
-		if (this.customSectionRender) {
+		if (this.customListItemRender) {
 			return (
 				<div {...wrapperProps}>
-					{this.customSectionRender(item, isSelected)}
+					{this.customListItemRender({ item, isSelected, selectionChanged, baseRender })}
 				</div>
 			);
 		}
 
 		// 2. Default Renderer
-		const searchResult = item as SmartDropdownSearchResultItem;
-		const hasSubtitle = !!searchResult.subtitle;
-		const hasImage = !!searchResult.imageUrl;
-		const showCheckbox = this.multiselect && !this.isSearchActive && !hasImage;
-
 		return (
 			<div {...wrapperProps}>
-				{hasImage
-					? (
-							<img src={searchResult.imageUrl} class="result-image" alt="" />
-						)
-					: (
-							showCheckbox && <div class={`checkbox-visual ${isSelected ? 'checked' : ''}`} aria-hidden="true"></div>
-						)}
-
-				<div class="item-content">
-					<span class="item-text">{item.text}</span>
-					{hasSubtitle && (
-						<span class="item-subtitle">{searchResult.subtitle}</span>
-					)}
-				</div>
+				{this.renderDefaultListItemContent(item, isSelected)}
 			</div>
 		);
 	}
@@ -662,7 +746,7 @@ export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> imple
 		return (
 			<FormItemWrapper label={this.label} cssClass={this.cssClass} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} maxWidth={this.maxWidth} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle} showClearValueButton={this.showClearValueButton}>
 				<div
-					class={`gopass-filter-wrapper mode-${this.searchMode}`}
+					class={`smart-dropdown-wrapper mode-${this.searchMode}`}
 					// Only the outer wrapper acts as combobox if not in direct input mode
 					role={this.searchMode !== 'input' ? 'combobox' : undefined}
 					aria-expanded={this.isOpen}

package/components/input/checkbox.tsx

@@ -122,7 +122,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<label class="form-check-label">
 					<input class="form-check-input" type="checkbox" checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<span class="form-check-sign"></span>
-					{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : this.checkboxLabelHtml}
+					{this.getCustomRenderedLabel(h) ?? this.checkboxLabelHtml}
 				</label>
 			</div>
 		);
@@ -140,7 +140,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
+						{this.getCustomRenderedLabel(h) ?? <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>
@@ -160,7 +160,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
+						{this.getCustomRenderedLabel(h) ?? <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.225",
+	"version": "0.0.227",
 	"files": [
 		"app/",
 		"common/",