@lynx-js/web-elements 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lynx-js/web-elements
 
+## 0.5.4
+
+### Patch Changes
+
+- chore: bump the output target to es2024 ([#518](https://github.com/lynx-family/lynx-stack/pull/518))
+
+- fix: the `\n` character should create a new line ([#522](https://github.com/lynx-family/lynx-stack/pull/522))
+
+  add `white-space-collapse: preserve-breaks` to raw-text
+
+- fix: the `input` event of x-input with number type should have raw value ([#517](https://github.com/lynx-family/lynx-stack/pull/517))
+
+  For `type:=number` x-input with typed value "2."
+
+  Before this commit: the value is "2"
+
+  After this commit the value is "2."
+
+## 0.5.3
+
+### Patch Changes
+
+- feat: add `layoutchange` event support for x-view and x-text ([#408](https://github.com/lynx-family/lynx-stack/pull/408))
+
 ## 0.5.2
 
 ### Patch Changes

package/dist/XInput/InputBaseAttributes.js

@@ -37,13 +37,14 @@ let InputBaseAttributes = (() => {
                     // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
                     let inputMode = 'text';
                     let inputType = 'text';
+                    /**
+                     * For number / digit type, if the user is typing "2.", the raw value is expected to remain "2." rather than being altered.
+                     */
                     if (attributeValue === 'digit') {
                         inputMode = 'numeric';
-                        inputType = 'number';
                     }
                     else if (attributeValue === 'number') {
                         inputMode = 'decimal';
-                        inputType = 'number';
                     }
                     else if (attributeValue === 'email') {
                         inputMode = 'email';

package/dist/XInput/XInputEvents.js

@@ -26,7 +26,7 @@ let XInputEvents = (() => {
                         input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
                     }
                     else {
-                        input.addEventListener('input', this.#teleportInput, { passive: true });
+                        input.removeEventListener('input', this.#teleportInput);
                         input.removeEventListener('compositionend', this.#teleportCompositionendInput);
                     }
                 }, "#handleEnableConfirmEvent") }, _private_handleEnableConfirmEvent_decorators, { kind: "method", name: "#handleEnableConfirmEvent", static: false, private: true, access: { has: obj => #handleEnableConfirmEvent in obj, get: obj => obj.#handleEnableConfirmEvent }, metadata: _metadata }, null, _instanceExtraInitializers);

package/dist/XText/XText.js

@@ -8,8 +8,9 @@ import { Component, html } from '@lynx-js/web-elements-reactive';
 import { LynxExposure } from '../common/Exposure.js';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [LynxExposure, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDecorators = [Component('x-text', [LynxExposure, CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XView/XView.js

@@ -7,8 +7,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XView = (() => {
-    let _classDecorators = [Component('x-view', [LynxExposure])];
+    let _classDecorators = [Component('x-view', [LynxExposure, CommonEventsAndMethods])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/common/CommonEventsAndMethods.d.ts

@@ -0,0 +1,6 @@
+export declare class CommonEventsAndMethods {
+    #private;
+    static readonly observedAttributes: never[];
+    constructor(currentElement: HTMLElement);
+    __handleScrollUpperThresholdEventEnabled: (enabled: boolean) => void;
+}

package/dist/common/CommonEventsAndMethods.js

@@ -0,0 +1,61 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { __esDecorate, __runInitializers } from "tslib";
+import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+let CommonEventsAndMethods = (() => {
+    let ___handleScrollUpperThresholdEventEnabled_decorators;
+    let ___handleScrollUpperThresholdEventEnabled_initializers = [];
+    let ___handleScrollUpperThresholdEventEnabled_extraInitializers = [];
+    return class CommonEventsAndMethods {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            ___handleScrollUpperThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('layoutchange')];
+            __esDecorate(null, null, ___handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "__handleScrollUpperThresholdEventEnabled", static: false, private: false, access: { has: obj => "__handleScrollUpperThresholdEventEnabled" in obj, get: obj => obj.__handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj.__handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, ___handleScrollUpperThresholdEventEnabled_initializers, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [];
+        #dom;
+        #observing = false;
+        #resizeObserver;
+        constructor(currentElement) {
+            __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
+            this.#dom = currentElement;
+        }
+        __handleScrollUpperThresholdEventEnabled = __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
+            if (enabled) {
+                if (!this.#resizeObserver) {
+                    this.#resizeObserver = new ResizeObserver(([entry]) => {
+                        if (entry) {
+                            // The layoutchange event is the border box of the element
+                            const { width, height, left, right, top, bottom } = entry.contentRect;
+                            const id = this.#dom.id;
+                            this.#dom.dispatchEvent(new CustomEvent('layoutchange', {
+                                detail: {
+                                    width,
+                                    height,
+                                    left,
+                                    right,
+                                    top,
+                                    bottom,
+                                    id,
+                                },
+                                ...commonComponentEventSetting,
+                            }));
+                        }
+                    });
+                    if (!this.#observing) {
+                        this.#resizeObserver.observe(this.#dom);
+                        this.#observing = true;
+                    }
+                }
+            }
+            else {
+                this.#resizeObserver?.disconnect();
+            }
+        });
+    };
+})();
+export { CommonEventsAndMethods };
+//# sourceMappingURL=CommonEventsAndMethods.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "private": false,
   "repository": {
     "type": "git",

package/src/XText/x-text.css

@@ -263,6 +263,7 @@ x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
 
 raw-text {
   display: none;
+  white-space-collapse: preserve-breaks;
 }
 x-text > raw-text,
 inline-text > raw-text,