@fluid-topics/ft-wc-utils 2.0.14 → 2.0.16

package/build/ClusteringHelper.d.ts

@@ -24,6 +24,7 @@ export declare class ClusteringHelper {
     private clusteringMetadata;
     private metadataDescriptors;
     constructor(allResults: Array<FtSearchResultClusterEntry>, selectedResult: FtSearchResultClusterEntry, clusteringMetadata: Set<string>, metadataDescriptors: Array<FtMetadataDescriptor>);
+    static findResultWithMetadataValue(results: FtSearchResultClusterEntry[], metadataKey: string, metadataValue: string): FtSearchResultClusterEntry | undefined;
     static extractResultMetadata(options: Omit<ExtractResultMetadataOptions, "key">): FlatMetadata[];
     static extractResultMetadata(options: ExtractResultMetadataOptions): Optional<FlatMetadata>;
     static flattenMetadata(metadata: Optional<FtMetadata>[], hierarchicalValueTruncatingLevel?: number, dateFormatter?: ((value: string) => string)): FlatMetadata[];

package/build/ClusteringHelper.js

@@ -12,8 +12,12 @@ export class ClusteringHelper {
         this.clusteringMetadata = clusteringMetadata;
         this.metadataDescriptors = metadataDescriptors;
     }
+    static findResultWithMetadataValue(results, metadataKey, metadataValue) {
+        return results === null || results === void 0 ? void 0 : results.find((result) => { var _a; return ((_a = this.extractResultMetadata({ result }).find((meta) => meta.key == metadataKey)) === null || _a === void 0 ? void 0 : _a.value) == metadataValue; });
+    }
     static extractResultMetadata(options) {
-        const metadata = accessResult(options.result).metadata;
+        var _a, _b;
+        const metadata = (_b = (_a = accessResult(options.result)) === null || _a === void 0 ? void 0 : _a.metadata) !== null && _b !== void 0 ? _b : [];
         if (options.key == null) {
             return ClusteringHelper.flattenMetadata(metadata, options.hierarchicalValueTruncatingLevel, options.dateFormatter);
         }

package/build/FtLitElement.js

@@ -14,13 +14,12 @@ const constructorPrototype = Symbol("constructorPrototype");
 const constructorName = Symbol("constructorName");
 const exportpartsDebouncer = Symbol("exportpartsDebouncer");
 const dynamicDependenciesLoaded = Symbol("dynamicDependenciesLoaded");
-class ExportpartsUpdatedEvent extends CustomEvent {
+export class ExportpartsUpdatedEvent extends CustomEvent {
     constructor() {
         super(ExportpartsUpdatedEvent.eventName, { bubbles: true });
     }
 }
 ExportpartsUpdatedEvent.eventName = "exportparts-updated";
-export { ExportpartsUpdatedEvent };
 export class FtLitElement extends ScopedRegistryLitElement {
     constructor() {
         super();

package/build/SearchPlaceConverter.d.ts

@@ -42,4 +42,6 @@ export declare class SearchPlaceConverter {
     private superEscapeFilters;
     private unescapeFilterValue;
     private parseLegacyPeriodFilter;
+    static clearSearchParamsInUrl(href: string): string;
+    static updateLocaleParamInUrl(href: string, locale?: string): string;
 }

package/build/SearchPlaceConverter.js

@@ -1,4 +1,4 @@
-import { FtDateFilterType, FtSearchKeywordMatch, isFtDateFilterType, isFtVirtualField } from "@fluid-topics/public-api";
+import { FtDateFilterType, FtSearchKeywordMatch, isFtDateFilterType, isFtVirtualField, } from "@fluid-topics/public-api";
 import { minmax } from "./helpers";
 function quote(value) {
     return `"${value}"`;
@@ -285,4 +285,26 @@ export class SearchPlaceConverter {
         }
         return [];
     }
+    static clearSearchParamsInUrl(href) {
+        const url = new URL(href);
+        const paramsToClear = [
+            SearchPlaceQueryParams.LOCALE,
+            SearchPlaceQueryParams.FILTERS,
+            SearchPlaceQueryParams.VALUE_FILTERS,
+            SearchPlaceQueryParams.DATE_FILTERS,
+            SearchPlaceQueryParams.RANGE_FILTERS,
+        ];
+        paramsToClear.forEach((param) => {
+            url.searchParams.delete(param);
+        });
+        return url.toString();
+    }
+    static updateLocaleParamInUrl(href, locale) {
+        const url = new URL(href);
+        url.searchParams.delete(SearchPlaceQueryParams.LOCALE);
+        if (locale !== undefined) {
+            url.searchParams.append(SearchPlaceQueryParams.LOCALE, locale);
+        }
+        return url.toString();
+    }
 }

package/build/directives/focusTrap.d.ts

@@ -0,0 +1,44 @@
+import { ElementPart } from "lit";
+import { AsyncDirective, PartInfo } from "lit/async-directive.js";
+/**
+ * This directive will trap the focus inside the element it's attached to, by creating 2 invisible elements at the top and bottom of it.
+ * Once the focus is trapped, it will circle from top to bottom.
+ * This accessibility behaviour can be used in modals and other popover elements, but there should always be a mean to quit the trapping element
+ * (for example by pressing Escape) which should be handled separately from this directive.
+ *
+ * Use directly on the container you want to trap the focus inside.
+ * <pre><div id="my-container" ${ focusTrap() }>
+ *     <!-- elements to cycle on... -->
+ * <div></pre>
+ */
+export declare class FocusTrapDirective extends AsyncDirective {
+    private firstTrap?;
+    private lastTrap?;
+    private part?;
+    private get element();
+    private readonly onFirstTrapFocus;
+    private readonly onLastTrapFocus;
+    constructor(partInfo: PartInfo);
+    render(): symbol;
+    update(part: ElementPart): symbol;
+    reconnected(): void;
+    disconnected(): void;
+    private isElementTrappable;
+    private createFocusTrap;
+    /**
+     * Creates an invisible focusable element
+     */
+    private createTrap;
+    private getChildren;
+    private focusFirstDescendant;
+    private focusLastDescendant;
+    private updateCompleteIfNecessary;
+    private isInsideElement;
+    /**
+     * Try to focus an element if focusable and return true, otherwise return false
+     */
+    private attemptFocus;
+    private isFocusable;
+    private isElementDisabled;
+}
+export declare const focusTrap: () => import("lit-html/directive").DirectiveResult<typeof FocusTrapDirective>;

package/build/directives/focusTrap.js

@@ -0,0 +1,169 @@
+import { noChange, } from "lit";
+import { AsyncDirective, directive, } from "lit/async-directive.js";
+import { ReactiveElement } from "lit-element";
+/**
+ * This directive will trap the focus inside the element it's attached to, by creating 2 invisible elements at the top and bottom of it.
+ * Once the focus is trapped, it will circle from top to bottom.
+ * This accessibility behaviour can be used in modals and other popover elements, but there should always be a mean to quit the trapping element
+ * (for example by pressing Escape) which should be handled separately from this directive.
+ *
+ * Use directly on the container you want to trap the focus inside.
+ * <pre><div id="my-container" ${ focusTrap() }>
+ *     <!-- elements to cycle on... -->
+ * <div></pre>
+ */
+export class FocusTrapDirective extends AsyncDirective {
+    get element() {
+        var _a;
+        return (_a = this.part) === null || _a === void 0 ? void 0 : _a.element;
+    }
+    constructor(partInfo) {
+        super(partInfo);
+        this.onFirstTrapFocus = async (event) => {
+            if (!this.element || !event.relatedTarget) {
+                return;
+            }
+            const previousFocusedElement = event.relatedTarget; // In case of a focus event, should always be an Element
+            const isPreviousFocusInsideOfTrap = this.isInsideElement(previousFocusedElement, this.element);
+            if (isPreviousFocusInsideOfTrap) {
+                await this.focusLastDescendant(this.element);
+            }
+            else {
+                await this.focusFirstDescendant(this.element);
+            }
+        };
+        this.onLastTrapFocus = async (event) => {
+            if (!this.element || !event.relatedTarget) {
+                return;
+            }
+            const previousFocusedElement = event.relatedTarget; // In case of a focus event, should always be an Element
+            const isPreviousFocusInsideOfTrap = this.isInsideElement(previousFocusedElement, this.element);
+            if (isPreviousFocusInsideOfTrap) {
+                await this.focusFirstDescendant(this.element);
+            }
+            else {
+                await this.focusLastDescendant(this.element);
+            }
+        };
+    }
+    render() {
+        return noChange;
+    }
+    update(part) {
+        this.part = part;
+        if (this.isElementTrappable(part.element)) {
+            this.createFocusTrap(part.element);
+        }
+        return noChange;
+    }
+    reconnected() {
+        var _a;
+        if (this.isElementTrappable((_a = this.part) === null || _a === void 0 ? void 0 : _a.element)) {
+            this.createFocusTrap(this.part.element);
+        }
+    }
+    disconnected() {
+        var _a, _b, _c, _d;
+        (_a = this.firstTrap) === null || _a === void 0 ? void 0 : _a.removeEventListener("focus", this.onFirstTrapFocus);
+        (_b = this.lastTrap) === null || _b === void 0 ? void 0 : _b.removeEventListener("focus", this.onLastTrapFocus);
+        (_c = this.firstTrap) === null || _c === void 0 ? void 0 : _c.remove();
+        (_d = this.lastTrap) === null || _d === void 0 ? void 0 : _d.remove();
+        this.firstTrap = undefined;
+        this.lastTrap = undefined;
+    }
+    isElementTrappable(element) {
+        return !!element && (element instanceof HTMLElement) && element.childElementCount > 0;
+    }
+    createFocusTrap(element) {
+        this.firstTrap = this.createTrap();
+        this.lastTrap = this.createTrap();
+        element.insertBefore(this.firstTrap, element.firstChild);
+        element.appendChild(this.lastTrap);
+        this.lastTrap.addEventListener("focus", this.onLastTrapFocus);
+        this.firstTrap.addEventListener("focus", this.onFirstTrapFocus);
+    }
+    /**
+     * Creates an invisible focusable element
+     */
+    createTrap() {
+        const trapElement = document.createElement("div");
+        trapElement.tabIndex = 0;
+        return trapElement;
+    }
+    getChildren(element) {
+        if (element instanceof HTMLSlotElement) {
+            return element.assignedElements();
+        }
+        if (element.shadowRoot) {
+            return element.shadowRoot.children;
+        }
+        return element.children;
+    }
+    async focusFirstDescendant(element) {
+        await this.updateCompleteIfNecessary(element);
+        const children = this.getChildren(element);
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child instanceof HTMLElement && (this.attemptFocus(child) || await this.focusFirstDescendant(child))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    async focusLastDescendant(element) {
+        await this.updateCompleteIfNecessary(element);
+        const children = this.getChildren(element);
+        for (let i = children.length - 1; i >= 0; i--) { // We cycle through the list backwards to find the latest element focusable
+            const child = children[i];
+            if (child instanceof HTMLElement && (this.attemptFocus(child) || await this.focusLastDescendant(child))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    async updateCompleteIfNecessary(element) {
+        if (element instanceof ReactiveElement) {
+            await element.updateComplete;
+        }
+    }
+    isInsideElement(target, container) {
+        for (let node = target; node; node = node.parentNode) {
+            if (node === container) {
+                return true;
+            }
+            if (node instanceof ShadowRoot) {
+                node = node.host;
+            }
+            else if (node.assignedSlot) {
+                node = node.assignedSlot;
+            }
+        }
+        return false;
+    }
+    /**
+     * Try to focus an element if focusable and return true, otherwise return false
+     */
+    attemptFocus(element) {
+        if (element === this.firstTrap || element === this.lastTrap || !this.isFocusable(element)) {
+            return false;
+        }
+        element.focus();
+        return true;
+    }
+    isFocusable(element) {
+        if (!element.checkVisibility() || this.isElementDisabled(element)) {
+            return false;
+        }
+        if (element instanceof HTMLAnchorElement) {
+            return !!element.href && element.rel !== "ignore";
+        }
+        if (element instanceof HTMLInputElement) {
+            return element.type !== "hidden";
+        }
+        return element.tabIndex >= 0;
+    }
+    isElementDisabled(element) {
+        return "disabled" in element && !!element.disabled;
+    }
+}
+export const focusTrap = directive(FocusTrapDirective);

package/build/directives/index.d.ts

@@ -1 +1,2 @@
+export * from "./focusTrap";
 export * from "./whenSize";

package/build/directives/index.js

@@ -1 +1,2 @@
+export * from "./focusTrap";
 export * from "./whenSize";