lightning-base-components 1.17.2-alpha → 1.17.5-alpha

package/src/lightning/dynamicIcon/dynamic-icon-trend.slds.css

@@ -0,0 +1,117 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+@supports (--styling-hooks: '') {
+  :host([data-render-mode="shadow"]) {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+
+    /* Circle's cirumference, r=7.375 * pi * 2 */
+    --_icon-trend-circumference: 46.3385px;
+
+    /* Arrow path length */
+    --_icon-trend-arrow-length: 20.15px;
+
+    /* HACK: Trick minifiers so they don't minify 0px to 0,
+        which breaks the animation in Edge */
+    --_icon-trend-zero: 0.1px;
+
+    /* HACK: a 1px stroke sitting on a pixel grid line (here: the arrow)
+        doesn't get aliased well on non-retina displays,
+        so we bump up the stroke-width to force a better anti-aliasing
+        which improves rendering at small size */
+    --_icon-trend-one: 1.125px;
+
+    --_duration-slowly: 0.4s;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend.slds-is-animated .slds-icon-trend__arrow {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    animation: slds-icon-trend-arrow calc(var(--_duration-slowly) * 2) var(--_duration-slowly) ease-in-out both;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend.slds-is-animated .slds-icon-trend__circle {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    animation: slds-icon-trend-circle calc(var(--_duration-slowly) * 2) ease-in-out both;
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend.slds-is-paused .slds-icon-trend__arrow,:host([data-render-mode="shadow"]) 
+  .slds-icon-trend.slds-is-paused .slds-icon-trend__circle {
+    animation-play-state: paused;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend[data-slds-trend="down"] {
+    color: #ba0517;
+    transform: rotate(45deg);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend[data-slds-trend="neutral"] {
+    color: #939393;
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend[data-slds-trend="up"] {
+    color: #2e844a;
+    transform: rotate(-45deg);
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend__arrow,:host([data-render-mode="shadow"]) 
+  .slds-icon-trend__circle {
+    stroke: currentColor;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    stroke-width: var(--_icon-trend-one);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend__arrow {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    stroke-dashoffset: var(--_icon-trend-zero);
+    stroke-dasharray: calc(var(--_icon-trend-arrow-length) * 2 - var(--_icon-trend-one));
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  :host([data-render-mode="shadow"]) .slds-icon-trend__circle {
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    stroke-dasharray: calc(var(--_icon-trend-circumference) - 4px), var(--_icon-trend-circumference);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  }
+
+  @keyframes slds-icon-trend-arrow {
+    from {
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+      stroke-dashoffset: calc(var(--_icon-trend-arrow-length) * 2);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    }
+  }
+
+  @keyframes slds-icon-trend-circle {
+    from {
+      /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+      stroke-dasharray: var(--_icon-trend-zero), var(--_icon-trend-circumference);
+      /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+    }
+  }
+}

package/src/lightning/dynamicIcon/dynamic-icon-waffle.slds.css

@@ -0,0 +1,177 @@
+
+/* Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
+Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+/* needed to reset button styles as a result of button neutral vs base parity issue */
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container {
+  border: 0;
+  outline: 0;
+  padding: 0;
+  background: transparent;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover [class*='slds-r'],:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus [class*='slds-r'] {
+  animation: slds-icon-waffle-throb 2 200ms alternate;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r1,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r2,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r3,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r1,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r2,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r3 {
+  background-color: #418fde;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r4,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r5,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r7,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r4,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r5,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r7 {
+  background-color: #ed8b00;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r6,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r8,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r9,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r6,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r8,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r9 {
+  background-color: #ffb60f;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r2,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r4,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r2,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r4 {
+  transition-delay: 50ms;
+  animation-delay: 50ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r3,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r5,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r7,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r3,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r5,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r7 {
+  transition-delay: 100ms;
+  animation-delay: 100ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r6,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:hover .slds-r8,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r6,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r8 {
+  transition-delay: 150ms;
+  animation-delay: 150ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle_container:hover .slds-r9,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle_container:focus .slds-r9 {
+  transition-delay: 200ms;
+  animation-delay: 200ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle {
+  width: 1.3125rem;
+  height: 1.3125rem;
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle [class*='slds-r'] {
+  width: 0.3125rem;
+  height: 0.3125rem;
+  background-color: #747474;
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  transition: background-color 100ms;
+  transform-origin: 50% 50%;
+  will-change: scale, background-color;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r1 {
+  top: 0;
+  left: 0;
+  transition-delay: 200ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r2 {
+  top: 0;
+  left: 0.5rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r3 {
+  top: 0;
+  right: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r4 {
+  top: 0.5rem;
+  left: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r5 {
+  top: 0.5rem;
+  left: 0.5rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r6 {
+  top: 0.5rem;
+  right: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r7 {
+  bottom: 0;
+  left: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r8 {
+  bottom: 0;
+  left: 0.5rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r9 {
+  bottom: 0;
+  right: 0;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r2,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle .slds-r4 {
+  transition-delay: 150ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r3,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle .slds-r5,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle .slds-r7 {
+  transition-delay: 100ms;
+}
+
+:host([data-render-mode="shadow"]) .slds-icon-waffle .slds-r6,:host([data-render-mode="shadow"]) 
+.slds-icon-waffle .slds-r8 {
+  transition-delay: 50ms;
+}
+
+@keyframes slds-icon-waffle-throb {
+  to {
+    transform: scale(1.5);
+  }
+}

package/src/lightning/dynamicIcon/ellie.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-ellie.slds.css'; */

package/src/lightning/dynamicIcon/eq.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-eq.slds.css'; */

package/src/lightning/dynamicIcon/score.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-score.slds.css'; */

package/src/lightning/dynamicIcon/strength.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-strength.slds.css'; */

package/src/lightning/dynamicIcon/trend.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-trend.slds.css'; */

package/src/lightning/dynamicIcon/waffle.css

@@ -0,0 +1 @@
+/* @import './dynamic-icon-waffle.slds.css'; */

package/src/lightning/f6Controller/f6Controller.js

@@ -0,0 +1,382 @@
+import { debounce } from 'lightning/inputUtils';
+import { findAllTabbableElements } from 'lightning/focusUtils';
+const DEBOUNCE_KEY_DOWN = 300;
+
+export const DEFAULT_CONFIG = {
+    navKey: 'F6',
+    f6RegionAttribute: 'data-f6-region',
+};
+
+/**
+ * finds and returns the active element from an element
+ * @param {Element} element
+ * @returns {Element} - active element, otherwise, undefined
+ */
+export const getActiveElement = (element) => {
+    if (!element) {
+        return element;
+    }
+    if (!element.shadowRoot) {
+        if (element.activeElement) {
+            return getActiveElement(element.activeElement);
+        }
+        return element;
+    }
+    if (!element.shadowRoot.activeElement) {
+        return element;
+    }
+    return getActiveElement(element.shadowRoot.activeElement);
+};
+
+/**
+ * F6Controller is a global focus management system which allows end users to use keyboard shortcuts to
+ * quickly move to designated regions in a page.
+ * It handles logic for:
+ * - Globally detecting F6 regions (i.e. registered components must have the data attribute stored in config - f6RegionAttribute
+ *  in their tag, by default, 'data-f6-region')
+ * - Handling F6 keypresses by focusing and highlighting F6 regions
+ * Supported keyboard shortcuts:
+ * - Ctrl/Cmd + F6 to move focus to the next available registered region.
+ * - Shift + Ctrl/Cmd + F6 to move focus to the previous available registered region.
+ */
+
+export class F6Controller {
+    // an array of registered components
+    regions = [];
+
+    // Default configuration
+    config = DEFAULT_CONFIG;
+
+    // reference to the debounced key down handler
+    _debounceKeyDownHandler;
+
+    // reference to the style element
+    _styleElement;
+
+    /**
+     * Creates a F6Controller with the given configuration.
+     * @param {Object} config - a configuration object
+     * - config.navKey: the key used as a trigger for navigating between regions
+     * - config.f6RegionAttribute: attribute that defines f6 regions
+     */
+    constructor(config = {}) {
+        // debounce function for handling keydown event
+        this._debounceKeyDownHandler = debounce(
+            this.handleKeyDown.bind(this),
+            DEBOUNCE_KEY_DOWN
+        );
+        this.initialize(config);
+    }
+
+    appendStyleElement() {
+        // all F6 regions must be position relative.
+        this._styleElement = document.createElement('style');
+        this._styleElement.innerText = `[${this.config.f6RegionAttribute}]:focus-within { position: relative; outline: rgb(94, 158, 214) 3px solid; outline-offset: 3px; z-index: 9999;}`;
+        this._styleElement.setAttribute('type', 'text/css');
+        document.head.appendChild(this._styleElement);
+    }
+    /**
+     * Find the first focusable element inside of the input element.
+     * If no focusable element, set the input element to be focusable.
+     * @param {Element} element element to be examined
+     * @returns {Element} - the focusable element
+     */
+    findFocusableElement(element) {
+        if (!element || !element.isConnected) {
+            return undefined;
+        }
+
+        const tabbableElements = findAllTabbableElements(element);
+        if (tabbableElements && tabbableElements.length) {
+            return tabbableElements[0];
+        }
+        element.tabIndex = '-1';
+        return element;
+    }
+
+    /**
+     * Focus inside the given region:
+     * - element that last had focus in that region, else
+     * - first focusable element in that region, else
+     * - focus on region itself (no focusable elements in region)
+     * @param {Element} region - representing a region of the page
+     */
+    focusIn(region) {
+        const element = this.findFocusableElement(region);
+        if (element) {
+            element.focus();
+        }
+    }
+
+    /**
+     * Navigates to next/previous region
+     * @param {KeyboardEvent} event - a KeyDown event
+     */
+    handleNavigation(event) {
+        event.preventDefault();
+        if (!this.regions.length) {
+            return;
+        }
+        const isPrevious = event.shiftKey;
+        const currentRegionIndex = this.getElementRegionIndex(
+            getActiveElement(event.target)
+        );
+
+        const adjacentRegionIndex = this.getAdjacentRegionIndex(
+            currentRegionIndex,
+            isPrevious
+        );
+
+        if (adjacentRegionIndex === -1) {
+            return;
+        }
+        this.focusIn(this.regions[adjacentRegionIndex]);
+    }
+
+    /**
+     * Determines whether or not container contains element through the shadow DOM.
+     * @param {Element} container - container element
+     * @param {Element} element - target element
+     * @returns {boolean}
+     */
+    shadowContains(container, element) {
+        if (container === element || container.contains(element)) {
+            return true;
+        }
+
+        if (container.shadowRoot) {
+            if (
+                this.isElementInContainerElements(
+                    container.shadowRoot.children,
+                    element
+                )
+            ) {
+                return true;
+            }
+        }
+        if (container.tagName === 'SLOT') {
+            if (
+                this.isElementInContainerElements(
+                    container.assignedElements(),
+                    element
+                )
+            ) {
+                return true;
+            }
+        }
+
+        return this.isElementInContainerElements(container.children, element);
+    }
+
+    /**
+     * Returns true if the container element contains the searchElement
+     * @param {Array} containerElements
+     * @param {Element} searchElement
+     * @returns {boolean}
+     */
+    isElementInContainerElements(containerElements, searchElement) {
+        if (!containerElements || !containerElements.length) {
+            return false;
+        }
+        const numElements = containerElements.length;
+        for (let index = 0; index < numElements; index++) {
+            if (this.shadowContains(containerElements[index], searchElement)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Find the index of the region containing a given DOM element.
+     * Regions can't be nested, and are thus mutually exclusive.
+     * @param {Element} element - a DOM element
+     * @returns {number} index of DOM element's associated region in region array,
+     * or -1 if element is not contained in any region
+     */
+    getElementRegionIndex(element) {
+        if (!this.regions || !this.regions.length) {
+            return -1;
+        }
+        return this.regions.findIndex((container) => {
+            return this.shadowContains(container, element);
+        });
+    }
+
+    /**
+     * Gets the index of the next (or previous) region to highlight.
+     * @param {number} currentRegionIndex, index of the current region
+     * @param {boolean} isPrevious, true to get the index of the previous region
+     * @returns {number} index of the region to highlight next or -1 if the current region is the last region (1st region for reverse)
+     */
+    getAdjacentRegionIndex(currentRegionIndex, isPrevious) {
+        const lastRegionIndex = this.regions.length - 1;
+        if (lastRegionIndex < 0) {
+            return -1;
+        }
+        if (isPrevious) {
+            if (currentRegionIndex <= 0) {
+                return lastRegionIndex;
+            }
+            return currentRegionIndex - 1;
+        }
+
+        if (currentRegionIndex === lastRegionIndex) {
+            return 0;
+        }
+        return currentRegionIndex + 1;
+    }
+
+    /**
+     * Checks if a DOM element is visible. This only checks for visibility using
+     * `display:none` (on element or any of its ancestors) and doesn't account for
+     * elements hidden through other means - such as a opacity, visibility, aria-hidden, etc.
+     * @param {Element} element, a DOM element
+     * @returns {boolean} false if `display:none` or `visibility:hidden` is set anywhere in element's ancestor tree, true otherwise
+     */
+    isVisible(element) {
+        if (element === document.body || !(element instanceof Element)) {
+            return true;
+        }
+        try {
+            const computedStyle =
+                window.getComputedStyle(element) || element.style;
+            if (!computedStyle) {
+                return false;
+            }
+            const { display, visibility } = computedStyle;
+            if (
+                (display && display.toLowerCase() === 'none') ||
+                (visibility && visibility.toLowerCase() === 'hidden')
+            ) {
+                return false;
+            }
+            return this.isVisible(element.parentNode);
+        } catch (error) {
+            return false;
+        }
+    }
+
+    /**
+     * Checks if a DOM element has no content inside. A DOM has no content inside if it
+     * only contains slots as children.
+     * @param {Element} element, a DOM element
+     * @returns {boolean} - true if element has no children other than slots
+     */
+    isEmpty(element) {
+        if (element.tagName === 'SLOT') {
+            if (!this.isEmptyChildren(element.assignedElements())) {
+                return false;
+            }
+        }
+
+        let children = element.children;
+        if ((!children || !children.length) && element.shadowRoot) {
+            children = element.shadowRoot.children;
+        }
+
+        return this.isEmptyChildren(children);
+    }
+
+    /**
+     * Check if the children are all empty
+     * @param {*} children - element
+     * @returns {boolean} true if all the child element are empty
+     */
+    isEmptyChildren(children) {
+        if (!children || !children.length) {
+            return true;
+        }
+        const numChildren = children.length;
+        for (let index = 0; index < numChildren; index++) {
+            const child = children[index];
+            if (child.tagName !== 'SLOT' || !this.isEmpty(child)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Searches for regions in the DOM and populates this.regions
+     */
+    populateRegions() {
+        this.regions = [];
+
+        const treeWalker = document.createTreeWalker(
+            document.body,
+            NodeFilter.SHOW_ELEMENT,
+            this.elementFilter,
+            false
+        );
+
+        while (treeWalker.nextNode()) {
+            this.regions.push(treeWalker.currentNode);
+        }
+    }
+
+    /**
+     * Add document event listeners to handling all the F6 related interations
+     */
+    initialize(config = {}) {
+        document.addEventListener('keydown', this._debounceKeyDownHandler);
+        this.regions = [];
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        this.appendStyleElement();
+    }
+
+    /** Removes the event listeners bound in initialize(). */
+    cleanUp() {
+        document.removeEventListener('keydown', this._debounceKeyDownHandler);
+        this._regions = [];
+        this._config = DEFAULT_CONFIG;
+        this._debounceKeyDownHandler = null;
+        if (this._styleElement) {
+            document.head.removeChild(this._styleElement);
+            this._styleElement = null;
+        }
+    }
+
+    /**
+     * handle document keydown event, move focus to the adjacent region if it detects CTRL/CMD + F6
+     * @param {KeyDown} event
+     */
+
+    handleKeyDown = (event) => {
+        const { key, ctrlKey, metaKey } = event;
+        if (key === this.config.navKey && (ctrlKey || metaKey)) {
+            this.populateRegions();
+            this.handleNavigation(event);
+        }
+    };
+
+    elementFilter = (element) => {
+        if (
+            element.parentElement &&
+            element.parentElement.matches(`*[${this.config.f6RegionAttribute}]`)
+        ) {
+            return NodeFilter.FILTER_REJECT;
+        }
+
+        if (
+            element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+            this.isVisible(element) &&
+            !this.isEmpty(element)
+        ) {
+            return NodeFilter.FILTER_ACCEPT;
+        }
+
+        return NodeFilter.FILTER_SKIP;
+    };
+}
+
+let f6Controller;
+export const createF6Controller = (config) => {
+    if (!f6Controller) {
+        f6Controller = new F6Controller(config);
+    }
+    return f6Controller;
+};

package/src/lightning/f6Controller/f6Controller.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+</LightningComponentBundle>