@m3e/core 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/html-custom-data.json

@@ -197,6 +197,28 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-text-highlight",
+      "description": "Highlights text which matches a given search term.\n---\n\n\n### **Events:**\n - **highlight** - Emitted when content is highlighted.\n\n### **Slots:**\n - _default_ - Renders the content to highlight.\n\n### **CSS Properties:**\n - **--m3e-text-highlight-container-color** - Background color applied to highlighted text ranges. _(default: undefined)_\n- **--m3e-text-highlight-color** - Foreground color of highlighted text content. _(default: undefined)_\n- **--m3e-text-highlight-decoration** - Optional text decoration (e.g., underline, line-through) for highlighted text. _(default: undefined)_\n- **--m3e-text-highlight-shadow** - Optional text shadow for emphasis or contrast. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "case-sensitive",
+          "description": "A value indicating whether matching is case sensitive.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "A value indicating whether text highlighting is disabled.",
+          "values": []
+        },
+        {
+          "name": "term",
+          "description": "The term to highlight.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "m3e-text-overflow",
       "description": "An inline container which presents an ellipsis when content overflows.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content to truncate with an ellipsis.",

package/dist/index.js

@@ -519,7 +519,9 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
         }
     }
 }, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
-    const target = e.target;
+    if (e.target !== e.currentTarget)
+        return;
+    const target = e.currentTarget;
     if (!__classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target) && __classPrivateFieldGet(this, _PressedController_isPressedKey, "f")?.call(this, e.key)) {
         if (e.key === " ") {
             e.preventDefault();
@@ -2230,7 +2232,7 @@ function ConstraintValidation(base) {
  */
 function EventAttribute(base, ...types) {
     class _EventAttribute extends base {
-        /** @inheritdoc */
+        /** @internal */
         dispatchEvent(event) {
             if (types.includes(event.type)) {
                 const eventAttribute = this.getAttribute(`on${event.type}`);
@@ -2321,7 +2323,9 @@ function FormSubmitter(base) {
             this.type = "button";
             /** @private */
             this[_a] = async (e) => {
-                if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+                if (e.defaultPrevented ||
+                    (isDisabledMixin(this) && this.disabled) ||
+                    (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
                     return;
                 }
                 const form = this[internals].form;
@@ -2387,6 +2391,8 @@ function FormSubmitter(base) {
         }
     }
     _a = _clickHandler$1;
+    /** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+    _FormSubmitterMixin.formAssociated = true;
     __decorate([
         n$1()
     ], _FormSubmitterMixin.prototype, "name", null);
@@ -2501,7 +2507,10 @@ function KeyboardClick(base, allowEnter = true) {
         }
     }
     __KeyboardClickMixin_keyUpHandler = new WeakMap(), __KeyboardClickMixin_instances = new WeakSet(), __KeyboardClickMixin_handleKeyUp = function __KeyboardClickMixin_handleKeyUp(e) {
-        if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+        if (e.defaultPrevented ||
+            e.target !== e.currentTarget ||
+            (isDisabledMixin(this) && this.disabled) ||
+            (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
             return;
         }
         if (e.key === " " || (allowEnter && e.key === "Enter")) {
@@ -4507,5 +4516,211 @@ M3eTextOverflowElement = __decorate([
     t$2("m3e-text-overflow")
 ], M3eTextOverflowElement);
 
-export { AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlide, M3eStateLayerElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, formValue, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, validate };
+var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
+var M3eTextHighlightElement_1;
+/**
+ * Highlights text which matches a given search term.
+ *
+ * @description
+ * Highlights all text ranges in slotted content that match a given search term using the CSS Custom Highlight API.
+ *
+ * @example
+ * The following example illustrates highlighting "Lor".
+ * ```html
+ * <m3e-text-highlight term="Lor">
+ *  <p>
+ *    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ *    ut labore et dolore magna aliqua.
+ *  </p>
+ * </m3e-text-highlight>
+ * ```
+ *
+ * @tag m3e-text-highlight
+ *
+ * @slot - Renders the content to highlight.
+ *
+ * @attr case-sensitive - A value indicating whether matching is case sensitive.
+ * @attr disabled - A value indicating whether text highlighting is disabled.
+ * @attr term - The term to highlight.
+ *
+ * @fires highlight - Emitted when content is highlighted.
+ *
+ * @cssprop --m3e-text-highlight-container-color - Background color applied to highlighted text ranges.
+ * @cssprop --m3e-text-highlight-color - Foreground color of highlighted text content.
+ * @cssprop --m3e-text-highlight-decoration - Optional text decoration (e.g., underline, line-through) for highlighted text.
+ * @cssprop --m3e-text-highlight-shadow - Optional text shadow for emphasis or contrast.
+ */
+let M3eTextHighlightElement = M3eTextHighlightElement_1 = class M3eTextHighlightElement extends LitElement {
+    constructor() {
+        super();
+        _M3eTextHighlightElement_instances.add(this);
+        /** @private */ _M3eTextHighlightElement_id.set(this, `m3e-text-highlight-${M3eTextHighlightElement_1.__nextId++}`);
+        /** @private */ _M3eTextHighlightElement_ranges.set(this, new Array());
+        /** @private */ _M3eTextHighlightElement_styles.set(this, null);
+        /**
+         * A value indicating whether text highlighting is disabled.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * The term to highlight.
+         * @default ""
+         */
+        this.term = "";
+        /**
+         * A value indicating whether matching is case sensitive.
+         * @default false
+         */
+        this.caseSensitive = false;
+        if (this.isSupported) {
+            __classPrivateFieldSet(this, _M3eTextHighlightElement_styles, new CSSStyleSheet(), "f");
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f").replaceSync(css `
+          ::highlight(${unsafeCSS(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"))}) {
+            background-color: var(--m3e-text-highlight-container-color, ${DesignToken.color.secondaryContainer});
+            color: var(--m3e-text-highlight-color, ${DesignToken.color.onSecondaryContainer});
+            text-decoration: var(--m3e-text-highlight-decoration);
+            text-shadow: var(--m3e-text-highlight-shadow);
+          }
+        `.toString());
+        }
+    }
+    /** A value indicating whether text highlighting is supported by the browser. */
+    get isSupported() {
+        return !isServer && CSS.highlights ? true : false;
+    }
+    /** The ranges that match the current term. */
+    get ranges() {
+        return __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f");
+    }
+    /** @inheritdoc */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (this.shadowRoot && __classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f") && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f"))) {
+            this.shadowRoot.adoptedStyleSheets.push(__classPrivateFieldGet(this, _M3eTextHighlightElement_styles, "f"));
+        }
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("term") ||
+            _changedProperties.has("caseSensitive") ||
+            _changedProperties.has("disabled")) {
+            __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_highlight).call(this);
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_highlight)}"></slot>`;
+    }
+};
+_M3eTextHighlightElement_id = new WeakMap();
+_M3eTextHighlightElement_ranges = new WeakMap();
+_M3eTextHighlightElement_styles = new WeakMap();
+_M3eTextHighlightElement_instances = new WeakSet();
+_M3eTextHighlightElement_isTextNode = function _M3eTextHighlightElement_isTextNode(node) {
+    return /^(\\s|\\n)+$/gi.test(node.data) ? false : true;
+};
+_M3eTextHighlightElement_findTextNodes = function _M3eTextHighlightElement_findTextNodes(parent, nodes) {
+    if (parent instanceof HTMLSlotElement) {
+        parent.assignedElements({ flatten: true }).forEach((x) => {
+            switch (x.nodeType) {
+                case Node.TEXT_NODE:
+                    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_isTextNode).call(this, x)) {
+                        nodes.push(x);
+                    }
+                    break;
+                case Node.ELEMENT_NODE:
+                    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, x, nodes);
+                    break;
+            }
+        });
+    }
+    else {
+        parent.childNodes.forEach((x) => {
+            switch (x.nodeType) {
+                case Node.TEXT_NODE:
+                    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_isTextNode).call(this, x)) {
+                        nodes.push(x);
+                    }
+                    break;
+                case Node.ELEMENT_NODE:
+                    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, x, nodes);
+                    break;
+            }
+        });
+    }
+};
+_M3eTextHighlightElement_highlight = function _M3eTextHighlightElement_highlight() {
+    if (!this.isSupported || !this.isConnected)
+        return;
+    CSS.highlights.delete(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"));
+    __classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length = 0;
+    if (this.disabled)
+        return;
+    if (!this.term) {
+        this.dispatchEvent(new CustomEvent("highlight", {
+            detail: [...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")],
+            bubbles: false,
+            composed: false,
+        }));
+        return;
+    }
+    const texts = new Array();
+    __classPrivateFieldGet(this, _M3eTextHighlightElement_instances, "m", _M3eTextHighlightElement_findTextNodes).call(this, this, texts);
+    const term = !this.caseSensitive ? this.term.toLowerCase() : this.term;
+    __classPrivateFieldSet(this, _M3eTextHighlightElement_ranges, texts
+        .map((x) => {
+        return {
+            el: x,
+            text: (!this.caseSensitive ? x.textContent?.toLowerCase() : x.textContent) ?? "",
+        };
+    })
+        .map(({ el, text }) => {
+        const indices = new Array();
+        let startPos = 0;
+        while (startPos < text.length) {
+            const index = text.indexOf(term, startPos);
+            if (index === -1)
+                break;
+            indices.push(index);
+            startPos = index + term.length;
+        }
+        return indices.map((index) => {
+            const range = new Range();
+            range.setStart(el, index);
+            range.setEnd(el, index + term.length);
+            return range;
+        });
+    })
+        .flat(), "f");
+    if (__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f").length > 0) {
+        CSS.highlights.set(__classPrivateFieldGet(this, _M3eTextHighlightElement_id, "f"), new Highlight(...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")));
+    }
+    this.dispatchEvent(new CustomEvent("highlight", {
+        detail: [...__classPrivateFieldGet(this, _M3eTextHighlightElement_ranges, "f")],
+        bubbles: false,
+        composed: false,
+    }));
+};
+/** The styles of the element. */
+M3eTextHighlightElement.styles = css `
+    :host {
+      display: contents;
+    }
+  `;
+/** @private */ M3eTextHighlightElement.__nextId = 0;
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eTextHighlightElement.prototype, "disabled", void 0);
+__decorate([
+    n$1()
+], M3eTextHighlightElement.prototype, "term", void 0);
+__decorate([
+    n$1({ attribute: "case-sensitive", type: Boolean })
+], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
+M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([
+    t$2("m3e-text-highlight")
+], M3eTextHighlightElement);
+
+export { AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlide, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, formValue, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, validate };
 //# sourceMappingURL=index.js.map