@lynx-js/web-elements 0.2.4 → 0.4.0

package/dist/common/Exposure.js

@@ -6,8 +6,6 @@ import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
 import { scrollContainerDom } from './constants.js';
 export class LynxExposure {
     static observedAttributes = [
-        'x-enable-uiappear-event',
-        'x-enable-uidisappear-event',
         'exposure-id',
         'exposure-area',
         'exposure-screen-margin-top',
@@ -19,6 +17,8 @@ export class LynxExposure {
         'exposure-ui-margin-bottom',
         'exposure-ui-margin-left',
     ];
+    #uiAppearEnabled = false;
+    #uiDisappearEnabled = false;
     #currentElement;
     /**
      * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
@@ -33,9 +33,8 @@ export class LynxExposure {
      */
     #exposureObserver;
     get #exposureEnabled() {
-        return (this.#currentElement.getAttribute('x-enable-uiappear-event') !== null
-            || this.#currentElement.getAttribute('x-enable-uidisappear-event')
-                !== null
+        return (this.#uiAppearEnabled
+            || this.#uiDisappearEnabled
             || this.#currentElement.getAttribute('exposure-id') !== null);
     }
     constructor(currentElement) {
@@ -73,6 +72,16 @@ export class LynxExposure {
             return;
         },
     });
+    eventStatusChangedHandler = {
+        'uiappear': (status) => {
+            this.#uiAppearEnabled = status;
+            this.onExposureParamsChanged();
+        },
+        'uidisappear': (status) => {
+            this.#uiDisappearEnabled = status;
+            this.onExposureParamsChanged();
+        },
+    };
     #updateExposure() {
         const newParams = {
             exposureID: this.#currentElement.getAttribute('exposure-id'),

package/dist/common/bindToIntersectionObserver.d.ts

@@ -1 +1 @@
-export declare function bindToIntersectionObserver(rootGetter: () => HTMLElement, targetGetter: () => HTMLElement, callback: IntersectionObserverCallback): (newVal: string | null) => void;
+export declare function bindToIntersectionObserver(rootGetter: () => HTMLElement, targetGetter: () => HTMLElement, callback: IntersectionObserverCallback): (newVal: string | boolean | null) => void;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/web-platform/web-elements"
+  },
   "license": "Apache-2.0",
   "sideEffects": true,
   "type": "module",
@@ -17,10 +22,6 @@
       "types": "./dist/all.d.ts",
       "default": "./dist/all.js"
     },
-    "./lazy": {
-      "types": "./dist/lazy.d.ts",
-      "default": "./dist/lazy.js"
-    },
     "./LynxWrapper": {
       "types": "./dist/LynxWrapper/index.d.ts",
       "default": "./dist/LynxWrapper/index.js"
@@ -99,7 +100,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-elements-reactive": "0.1.0"
+    "@lynx-js/web-elements-reactive": "0.2.0"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/common-css/linear.css

@@ -66,14 +66,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --justify-content {
-  syntax: "*";
-  inherits: false;
-}
-@property --align-self {
-  syntax: "*";
-  inherits: false;
-}
 @property --flex-grow {
   syntax: "<number>";
   inherits: false;
@@ -207,8 +199,7 @@ x-viewpager-ng {
     --lynx-display-flex,
     var(--flex-direction)
   );
-  justify-content: var(--lynx-display-linear, var(--linear-justify-content))
-    var(--lynx-display-flex, var(--justify-content));
+  justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
 /** For @container
@@ -318,7 +309,6 @@ x-viewpager-ng {
       flex-grow: var(--flex-grow);
       flex-shrink: var(--flex-shrink);
       flex-basis: var(--flex-basis);
-      align-self: var(--align-self);
     }
   }
 

package/dist/lazy.d.ts

@@ -1 +0,0 @@
-export declare function loadElement(tag: string): void;

package/dist/lazy.js

@@ -1,106 +0,0 @@
-// 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.
-const loadingElementPromises = new Set();
-export function loadElement(tag) {
-    if (loadingElementPromises.has(tag)) {
-        return;
-    }
-    if (customElements.get(tag)) {
-        return;
-    }
-    switch (tag) {
-        case 'lynx-wrapper':
-            import('./LynxWrapper/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'scroll-view':
-            import('./ScrollView/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-audio-tt':
-            import('./XAudioTT/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-canvas':
-            import('./XCanvas/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-foldview-ng':
-        case 'x-foldview-header-ng':
-        case 'x-foldview-toolbar-ng':
-        case 'x-foldview-slot-ng':
-        case 'x-foldview-slot-drag-ng':
-            import('./XFoldViewNg/index.js');
-            loadingElementPromises.add('x-foldview-ng');
-            loadingElementPromises.add('x-foldview-header-ng');
-            loadingElementPromises.add('x-foldview-toolbar-ng');
-            loadingElementPromises.add('x-foldview-slot-ng');
-            loadingElementPromises.add('x-foldview-slot-drag-ng');
-            return;
-        case 'x-image':
-        case 'filter-image':
-            import('./XImage/index.js');
-            loadingElementPromises.add('x-image');
-            loadingElementPromises.add('filter-image');
-            return;
-        case 'x-input':
-            import('./XInput/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-list':
-            import('./XList/index.js');
-            loadingElementPromises.add('x-list');
-            loadingElementPromises.add('list-item');
-            return;
-        case 'x-overlay-ng':
-            import('./XOverlayNg/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-refresh-view':
-        case 'x-refresh-header':
-        case 'x-refresh-footer':
-            import('./XRefreshView/index.js');
-            loadingElementPromises.add('x-refresh-view');
-            loadingElementPromises.add('x-refresh-header');
-            loadingElementPromises.add('x-refresh-footer');
-            return;
-        case 'x-svg':
-            import('./XSvg/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-swiper':
-        case 'x-swiper-item':
-            import('./XSwiper/index.js');
-            loadingElementPromises.add('x-swiper');
-            loadingElementPromises.add('x-swiper-item');
-            return;
-        case 'x-text':
-        case 'inline-text':
-        case 'inline-image':
-        case 'inline-truncation':
-        case 'raw-text':
-            import('./XText/index.js');
-            loadingElementPromises.add('x-text');
-            loadingElementPromises.add('inline-text');
-            loadingElementPromises.add('inline-image');
-            loadingElementPromises.add('inline-truncation');
-            loadingElementPromises.add('raw-text');
-            return;
-        case 'x-textarea':
-            import('./XTextarea/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-view':
-            import('./XView/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-viewpager-ng':
-        case 'x-viewpager-item-ng':
-            import('./XViewpagerNg/index.js');
-            loadingElementPromises.add('x-viewpager-ng');
-            loadingElementPromises.add('x-viewpager-item-ng');
-            return;
-    }
-}
-//# sourceMappingURL=lazy.js.map