@lynx-js/web-elements 0.7.5 → 0.7.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @lynx-js/web-elements
 
+## 0.7.6
+
+### Patch Changes
+
+- fix: incorrect syntax for x-canvas part ([#1067](https://github.com/lynx-family/lynx-stack/pull/1067))
+
+- feat: x-input && x-textarea add attribute input-filter, which can filter input value. ([#1037](https://github.com/lynx-family/lynx-stack/pull/1037))
+
+- fix: incorrect top style of x-foldview-slot-ng if the toolbar is wrapped in lynx-wrapper ([#1101](https://github.com/lynx-family/lynx-stack/pull/1101))
+
+- perf: add loading="lazy" for image element ([#1056](https://github.com/lynx-family/lynx-stack/pull/1056))
+
+  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading
+
+- fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent. ([#1069](https://github.com/lynx-family/lynx-stack/pull/1069))
+
+- Updated dependencies [[`62d1078`](https://github.com/lynx-family/lynx-stack/commit/62d1078e67f2aba216a0d97bf1ad9ece624e498e)]:
+  - @lynx-js/web-elements-template@0.7.6
+
 ## 0.7.5
 
 ### Patch Changes

package/dist/XFoldViewNg/XFoldviewHeaderNg.d.ts

@@ -1,4 +1,5 @@
 export declare class XFoldviewHeaderNg extends HTMLElement {
+    #private;
     connectedCallback(): void;
     dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewHeaderNg.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 let XFoldviewHeaderNg = (() => {
     let _classDecorators = [Component('x-foldview-header-ng', [
             CommonEventsAndMethods,
@@ -24,11 +25,14 @@ let XFoldviewHeaderNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #parentResizeObserver = undefined;
         connectedCallback() {
-            this.parentElement?.[resizeObserver]?.observe(this);
+            const parentElement = getCombinedDirectParentElement(this, 'X-FOLDVIEW-NG');
+            this.#parentResizeObserver = parentElement?.[resizeObserver];
+            this.#parentResizeObserver?.observe(this);
         }
         dispose() {
-            this.parentElement?.[resizeObserver]?.unobserve(this);
+            this.#parentResizeObserver?.unobserve(this);
         }
     };
     return XFoldviewHeaderNg = _classThis;

package/dist/XFoldViewNg/XFoldviewToolbarNg.d.ts

@@ -1,4 +1,5 @@
 export declare class XFoldviewToolbarNg extends HTMLElement {
+    #private;
     connectedCallback(): void;
     dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewToolbarNg.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 let XFoldviewToolbarNg = (() => {
     let _classDecorators = [Component('x-foldview-toolbar-ng', [
             CommonEventsAndMethods,
@@ -24,11 +25,14 @@ let XFoldviewToolbarNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #parentResizeObserver = undefined;
         connectedCallback() {
-            this.parentElement?.[resizeObserver]?.observe(this);
+            const parentElement = getCombinedDirectParentElement(this, 'X-FOLDVIEW-NG');
+            this.#parentResizeObserver = parentElement?.[resizeObserver];
+            this.#parentResizeObserver?.observe(this);
         }
         dispose() {
-            this.parentElement?.[resizeObserver]?.unobserve(this);
+            this.#parentResizeObserver?.unobserve(this);
         }
     };
     return XFoldviewToolbarNg = _classThis;

package/dist/XInput/XInputEvents.js

@@ -19,7 +19,7 @@ let XInputEvents = (() => {
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableInputEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -48,7 +48,7 @@ let XInputEvents = (() => {
                 }, "#handleEnableSelectionEvent") }, _private_handleEnableSelectionEvent_decorators, { kind: "method", name: "#handleEnableSelectionEvent", static: false, private: true, access: { has: obj => #handleEnableSelectionEvent in obj, get: obj => obj.#handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['send-composing-input'];
+        static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
@@ -66,16 +66,20 @@ let XInputEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getInputElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
             const isComposing = event.isComposing;
+            input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
             this.#dom.dispatchEvent(new CustomEvent('input', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
+                    value: filterValue,
                     /** @deprecated */
-                    textLength: value.length,
+                    textLength: filterValue.length,
                     /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
@@ -86,15 +90,19 @@ let XInputEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getInputElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
+            input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
                 this.#dom.dispatchEvent(new CustomEvent('input', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
+                        value: filterValue,
                         /** @deprecated */
-                        textLength: value.length,
+                        textLength: filterValue.length,
                         /** @deprecated */
                         cursor: input.selectionStart,
                         isComposing: false,

package/dist/XTextarea/XTextareaEvents.js

@@ -19,7 +19,7 @@ let XTextareaEvents = (() => {
     return class XTextareaEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -48,7 +48,7 @@ let XTextareaEvents = (() => {
                 }, "#handleEnableSelectionEvent") }, _private_handleEnableSelectionEvent_decorators, { kind: "method", name: "#handleEnableSelectionEvent", static: false, private: true, access: { has: obj => #handleEnableSelectionEvent in obj, get: obj => obj.#handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['send-composing-input'];
+        static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
@@ -66,16 +66,20 @@ let XTextareaEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getTextareaElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
             const isComposing = event.isComposing;
+            input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
             this.#dom.dispatchEvent(new CustomEvent('input', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
+                    value: filterValue,
                     /** @deprecated */
-                    textLength: value.length,
+                    textLength: filterValue.length,
                     /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
@@ -86,15 +90,19 @@ let XTextareaEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getTextareaElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
+            input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
                 this.#dom.dispatchEvent(new CustomEvent('input', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
+                        value: filterValue,
                         /** @deprecated */
-                        textLength: value.length,
+                        textLength: filterValue.length,
                         /** @deprecated */
                         cursor: input.selectionStart,
                         isComposing: false,

package/dist/common/getCombinedParentElement.d.ts

@@ -0,0 +1 @@
+export declare const getCombinedDirectParentElement: <T extends HTMLElement>(element: HTMLElement, parentTagName: string) => T | undefined;

package/dist/common/getCombinedParentElement.js

@@ -0,0 +1,11 @@
+export const getCombinedDirectParentElement = (element, parentTagName) => {
+    let parentElement = element.parentElement;
+    if (parentElement?.tagName === 'LYNX-WRAPPER') {
+        parentElement = parentElement.parentElement;
+    }
+    if (parentElement?.tagName === parentTagName) {
+        return parentElement;
+    }
+    return;
+};
+//# sourceMappingURL=getCombinedParentElement.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "0.2.2",
-    "@lynx-js/web-elements-template": "0.7.5"
+    "@lynx-js/web-elements-template": "0.7.6"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XCanvas/x-canvas.css

@@ -10,7 +10,7 @@ x-canvas {
 x-canvas > * {
   display: none !important;
 }
-x-canvas::part {
+x-canvas::part(canvas) {
   height: 100%;
   width: 100%;
 }

package/src/XText/x-text.css

@@ -8,11 +8,15 @@ x-text {
   display: flex;
   overflow-wrap: break-word;
   align-items: stretch;
-  color: var(--lynx-color);
   background-image: var(--lynx-text-bg-color);
+  color: initial;
 }
+
+x-text > x-text, x-text > lynx-wrapper > x-text {
+  color: inherit;
+}
+
 x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
-  --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }