@lynx-js/web-elements 0.5.4 → 0.6.0

package/dist/common/CommonEventsAndMethods.js

@@ -2,8 +2,11 @@
 // 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 { convertLengthToPx } from './convertLengthToPx.js';
 import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
+import { scrollContainerDom } from './constants.js';
 import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+export const layoutChangeTarget = Symbol('layoutChangeTarget');
 let CommonEventsAndMethods = (() => {
     let ___handleScrollUpperThresholdEventEnabled_decorators;
     let ___handleScrollUpperThresholdEventEnabled_initializers = [];
@@ -15,16 +18,198 @@ let CommonEventsAndMethods = (() => {
             __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 = [];
+        static observedAttributes = [
+            'exposure-id',
+            'exposure-area',
+            'exposure-screen-margin-top',
+            'exposure-screen-margin-right',
+            'exposure-screen-margin-bottom',
+            'exposure-screen-margin-left',
+            'exposure-ui-margin-top',
+            'exposure-ui-margin-right',
+            'exposure-ui-margin-bottom',
+            'exposure-ui-margin-left',
+        ];
+        #uiAppearEnabled = false;
+        #uiDisappearEnabled = false;
         #dom;
-        #observing = false;
-        #resizeObserver;
+        /**
+         * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
+         */
+        #afterAttributeChanged;
+        /**
+         * If this dom is already exposured
+         */
+        #exposureTriggerd = false;
+        /**
+         * keeps the observer of current dom
+         */
+        #exposureObserver;
+        get #exposureEnabled() {
+            return (this.#uiAppearEnabled
+                || this.#uiDisappearEnabled
+                || this.#dom.getAttribute('exposure-id') !== null);
+        }
         constructor(currentElement) {
             __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
             this.#dom = currentElement;
         }
+        onExposureParamsChanged = () => {
+            if (!this.#afterAttributeChanged) {
+                this.#afterAttributeChanged = Promise.resolve().then(() => {
+                    this.#updateExposure();
+                    this.#afterAttributeChanged = undefined;
+                });
+            }
+        };
+        onExposureIdChanged(_, oldValue) {
+            if (oldValue) {
+                if (this.#exposureEnabled) {
+                    this.#sendOneExposureEvent({ isIntersecting: false }, oldValue);
+                }
+            }
+            this.onExposureParamsChanged();
+        }
+        attributeChangedHandler = new Proxy(this, {
+            get(target, attribute) {
+                if (CommonEventsAndMethods.observedAttributes.includes(attribute)) {
+                    if (attribute === 'exposure-id') {
+                        return { handler: target.onExposureIdChanged, noDomMeasure: true };
+                    }
+                    else {
+                        return {
+                            handler: target.onExposureParamsChanged,
+                            noDomMeasure: true,
+                        };
+                    }
+                }
+                return;
+            },
+        });
+        eventStatusChangedHandler = {
+            'uiappear': (status) => {
+                this.#uiAppearEnabled = status;
+                this.onExposureParamsChanged();
+            },
+            'uidisappear': (status) => {
+                this.#uiDisappearEnabled = status;
+                this.onExposureParamsChanged();
+            },
+        };
+        #updateExposure() {
+            const newParams = {
+                exposureID: this.#dom.getAttribute('exposure-id'),
+                exposureArea: this.#dom.getAttribute('exposure-area'),
+                exposureScene: this.#dom.getAttribute('exposure-scene'),
+                exposureScreenMarginTop: this.#dom.getAttribute('exposure-screen-margin-top'),
+                exposureScreenMarginRight: this.#dom.getAttribute('exposure-screen-margin-right'),
+                exposureScreenMarginBottom: this.#dom.getAttribute('exposure-screen-margin-bottom'),
+                exposureScreenMarginLeft: this.#dom.getAttribute('exposure-screen-margin-left'),
+                exposureUIMarginTop: this.#dom.getAttribute('exposure-ui-margin-top'),
+                exposureUIMarginRight: this.#dom.getAttribute('exposure-ui-margin-right'),
+                exposureUIMarginBottom: this.#dom.getAttribute('exposure-ui-margin-bottom'),
+                exposureUIMarginLeft: this.#dom.getAttribute('exposure-ui-margin-left'),
+            };
+            if (this.#exposureEnabled) {
+                if (IntersectionObserver) {
+                    const uiMargin = {
+                        top: convertLengthToPx(this.#dom, newParams.exposureUIMarginTop),
+                        right: convertLengthToPx(this.#dom, newParams.exposureUIMarginRight, true),
+                        bottom: convertLengthToPx(this.#dom, newParams.exposureUIMarginBottom),
+                        left: convertLengthToPx(this.#dom, newParams.exposureUIMarginLeft, true),
+                    };
+                    const screenMargin = {
+                        top: convertLengthToPx(this.#dom, newParams.exposureScreenMarginTop),
+                        right: convertLengthToPx(this.#dom, newParams.exposureScreenMarginRight, true),
+                        bottom: convertLengthToPx(this.#dom, newParams.exposureScreenMarginBottom),
+                        left: convertLengthToPx(this.#dom, newParams.exposureScreenMarginLeft, true),
+                    };
+                    /**
+                     * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
+                     */
+                    const calcedRootMargin = {
+                        top: (uiMargin.bottom ? -1 : 1)
+                            * (screenMargin.top - uiMargin.bottom),
+                        right: (uiMargin.left ? -1 : 1)
+                            * (screenMargin.right - uiMargin.left),
+                        bottom: (uiMargin.top ? -1 : 1)
+                            * (screenMargin.bottom - uiMargin.top),
+                        left: (uiMargin.right ? -1 : 1)
+                            * (screenMargin.left - uiMargin.right),
+                    };
+                    const exposureArea = this.#dom.getAttribute('exposure-area');
+                    const rootMargin = `${calcedRootMargin.top}px ${calcedRootMargin.right}px ${calcedRootMargin.bottom}px ${calcedRootMargin.left}px`;
+                    const threshold = exposureArea ? parseFloat(exposureArea) / 100 : 0;
+                    if (this.#exposureObserver) {
+                        this.#exposureObserver.disconnect();
+                    }
+                    /**
+                     * Get the closest scrollable ancestor
+                     */
+                    let root = this.#dom.parentElement;
+                    while (root) {
+                        // @ts-expect-error
+                        if (root[scrollContainerDom]) {
+                            // @ts-expect-error
+                            root = root[scrollContainerDom];
+                            break;
+                        }
+                        else {
+                            root = root.parentElement;
+                        }
+                    }
+                    this.#exposureTriggerd = false;
+                    this.#exposureObserver = new IntersectionObserver(([entry]) => {
+                        if (entry) {
+                            if (entry.isIntersecting) {
+                                this.#exposureTriggerd = true;
+                            }
+                            this.#sendOneExposureEvent(entry);
+                        }
+                    }, {
+                        rootMargin,
+                        threshold,
+                        root,
+                    });
+                    this.#exposureObserver.observe(this.#dom);
+                }
+            }
+            else {
+                this.#disableExposure();
+            }
+        }
+        #sendOneExposureEvent(entry, overrideExposureId) {
+            if (!this.#exposureTriggerd) {
+                return;
+            }
+            const exposureID = overrideExposureId
+                ?? this.#dom.getAttribute('exposure-id') ?? '';
+            const exposureScene = this.#dom.getAttribute('exposure-scene')
+                ?? '';
+            const detail = {
+                'exposure-id': exposureID,
+                'exposure-scene': exposureScene,
+                exposureID,
+                exposureScene,
+            };
+            const appearEvent = new CustomEvent(entry.isIntersecting ? 'uiappear' : 'uidisappear', {
+                ...commonComponentEventSetting,
+                detail,
+            });
+            const exposureEvent = new CustomEvent(entry.isIntersecting ? 'exposure' : 'disexposure', {
+                bubbles: true,
+                composed: false,
+                cancelable: false,
+                detail,
+            });
+            Object.assign(appearEvent, detail);
+            this.#dom.dispatchEvent(appearEvent);
+            this.#dom.dispatchEvent(exposureEvent);
+        }
+        #resizeObserving = false;
+        #resizeObserver;
         __handleScrollUpperThresholdEventEnabled = __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
-            if (enabled) {
+            if (enabled && this.#dom[layoutChangeTarget]) {
                 if (!this.#resizeObserver) {
                     this.#resizeObserver = new ResizeObserver(([entry]) => {
                         if (entry) {
@@ -45,9 +230,9 @@ let CommonEventsAndMethods = (() => {
                             }));
                         }
                     });
-                    if (!this.#observing) {
-                        this.#resizeObserver.observe(this.#dom);
-                        this.#observing = true;
+                    if (!this.#resizeObserving) {
+                        this.#resizeObserver.observe(this.#dom[layoutChangeTarget]);
+                        this.#resizeObserving = true;
                     }
                 }
             }
@@ -55,6 +240,12 @@ let CommonEventsAndMethods = (() => {
                 this.#resizeObserver?.disconnect();
             }
         });
+        #disableExposure() {
+            if (this.#exposureObserver) {
+                this.#exposureObserver.disconnect();
+                this.#exposureObserver = undefined;
+            }
+        }
     };
 })();
 export { CommonEventsAndMethods };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from '@lynx-js/web-elements-reactive';
-export * from './common/Exposure.js';
+export * from './common/CommonEventsAndMethods.js';
 export * from './common/commonEventInitConfiguration.js';
 export * from './common/constants.js';

package/dist/index.js

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 export * from '@lynx-js/web-elements-reactive';
-export * from './common/Exposure.js';
+export * from './common/CommonEventsAndMethods.js';
 export * from './common/commonEventInitConfiguration.js';
 export * from './common/constants.js';
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/ScrollView/scroll-view.css

@@ -4,7 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 scroll-view {
-  contain: content;
   display: flex !important;
   --lynx-display: linear !important;
   --lynx-display-toggle: var(--lynx-display-linear);

package/src/XFoldViewNg/x-foldview-ng.css

@@ -71,9 +71,6 @@ x-foldview-slot-ng {
   contain: strict;
   order: 3;
 }
-x-foldview-ng > x-foldview-slot-ng * {
-  touch-action: pan-x pinch-zoom;
-}
 x-foldview-slot-ng scroll-view {
   /* avoiding default bounce on ios safari */
   overscroll-behavior-y: none;

package/src/XList/x-list.css

@@ -8,15 +8,15 @@ x-list {
   scrollbar-width: none;
   --list-item-sticky-offset: 0;
   --list-item-span-count: 0;
-  --list-main-axis-gap: 0;
-  --list-cross-axis-gap: 0;
+  --list-main-axis-gap: 0px;
+  --list-cross-axis-gap: 0px;
 }
 
 x-list > *:not(list-item) {
   display: none;
 }
 
-x-list::part(content) {
+x-list::part(content), x-list[list-type="waterfall"]::part(waterfall-content) {
   display: flex;
   flex: 0 0 auto;
   flex-wrap: nowrap;
@@ -146,7 +146,7 @@ x-list[vertical-orientation="false"]::part(lower-threshold-observer) {
 }
 
 /* list-type single */
-x-list[list-type="single"] {
+x-list {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -154,7 +154,7 @@ x-list[list-type="single"] {
   column-gap: var(--list-cross-axis-gap);
 }
 
-x-list[list-type="single"][scroll-orientation="horizontal"] {
+x-list[scroll-orientation="horizontal"] {
   flex-direction: row;
   row-gap: var(--list-cross-axis-gap);
   column-gap: var(--list-main-axis-gap);
@@ -205,3 +205,65 @@ x-list[list-type="flow"][scroll-orientation="horizontal"][x-enable-scrolltolower
 x-list[list-type="flow"][scroll-orientation="horizontal"][x-enable-scrolltoloweredge-event]::part(lower-threshold-observer) {
   grid-row: 1 / calc(var(--list-item-span-count) + 1);
 }
+
+/* list-type waterfall */
+x-list[list-type="waterfall"] {
+  display: flex;
+  flex-direction: column;
+}
+
+x-list[list-type="waterfall"][scroll-orientation="horizontal"] {
+  flex-direction: row;
+}
+
+x-list[list-type="waterfall"]::part(slot) {
+  visibility: hidden;
+}
+
+x-list[list-type="waterfall"] list-item {
+  position: absolute;
+}
+
+x-list[list-type="waterfall"] list-item {
+  width: calc(
+    (
+      100% - var(--list-cross-axis-gap) * (var(--list-item-span-count) - 1)
+    ) /
+      var(--list-item-span-count)
+  );
+  height: fit-content;
+}
+
+x-list[list-type="waterfall"][scroll-orientation="horizontal"] list-item {
+  width: fit-content;
+  height: calc(
+    (
+      100% - var(--list-cross-axis-gap) * (var(--list-item-span-count) - 1)
+    ) /
+      var(--list-item-span-count)
+  );
+}
+
+x-list[list-type="waterfall"] list-item[full-span]:not([full-span="false"]) {
+  width: 100%;
+  height: fit-content;
+}
+
+x-list[list-type="waterfall"][scroll-orientation="horizontal"]
+  list-item[full-span]:not([full-span="false"]) {
+  width: fit-content;
+  height: 100%;
+}
+
+x-list[list-type="waterfall"]::part(upper-threshold-observer),
+x-list[list-type="waterfall"]::part(lower-threshold-observer) {
+  position: absolute;
+}
+
+x-list[list-type="waterfall"]::part(lower-threshold-observer) {
+  bottom: -999px;
+}
+
+x-list[list-type="waterfall"][scroll-orientation="horizontal"]::part(lower-threshold-observer) {
+  right: -999px;
+}

package/src/XText/x-text.css

@@ -7,8 +7,13 @@
 x-text {
   display: flex;
   overflow-wrap: break-word;
-  --lynx-color: none;
   align-items: stretch;
+  color: var(--lynx-color);
+  background-image: var(--lynx-text-bg-color);
+}
+x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
+  --lynx-color: canvastext;
+  --lynx-text-bg-color: initial;
 }
 x-text:not(:defined) {
   display: none;
@@ -20,53 +25,16 @@ x-text > * {
 
 x-text::part(inner-box) {
   text-overflow: inherit;
-  --lynx-color: inherit;
-  --lynx-color-gradient: inherit;
+  --lynx-text-bg-color: inherit;
 }
 
 x-text > x-text::part(inner-box),
 x-text > lynx-wrapper > x-text::part(inner-box) {
-  display: inline !important;
-}
-x-text, inline-text {
-  --lynx-color-toggle: var(--lynx-color-normal);
-  --lynx-color-gradient: var(--lynx-color-toggle,);
-  --lynx-color-normal: var(--lynx-color-toggle,);
+  display: contents !important;
 }
-
-/** For: `-a:var(-b,) -b:var(-a,) -c:var(-a)` -a,-b,-c will can be incorrectly detected as invalid when chrome version lower than 99
-  so we not support gradient
-  detail: https://issues.chromium.org/issues/40172841
-  chrome 99, firefox 46, safari 7
-  https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
- 
-  References:
-  https://developer.chrome.com/blog/new-in-chrome-99
-  https://chromestatus.com/feature/5679635154075648
-  https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
-  */
-/* autoprefixer: ignore next */
-@supports (text-emphasis: none) {
-  x-text::part(inner-box), inline-text {
-    background: var(--lynx-color-gradient, var(--lynx-color)) var(
-      --lynx-color-normal,
-      initial
-    );
-    -webkit-text-fill-color: var(--lynx-color-gradient, transparent) var(
-      --lynx-color-normal,
-      initial
-    );
-    background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
-    /* exist issue: https://github.com/facebook/react/issues/14200 */
-    /* import flag is essential on chromium */
-    -webkit-background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
-  }
+x-text::part(inner-box), inline-text, x-text::part(slot) {
+  background-clip: inherit;
+  -webkit-background-clip: inherit;
 }
 inline-text, inline-image, inline-truncation {
   display: none;
@@ -74,14 +42,12 @@ inline-text, inline-image, inline-truncation {
 
 /* nested components */
 x-text > x-text:defined,
-x-text > x-text:defined::part(inner-box),
 x-text > inline-text:defined,
 x-text > x-text:defined,
 inline-text > inline-text:defined,
 inline-truncation > inline-text:defined,
 inline-truncation > x-text:defined,
 x-text > lynx-wrapper > x-text:defined,
-x-text > lynx-wrapper > x-text:defined::part(inner-box),
 x-text > lynx-wrapper > inline-text:defined,
 x-text > lynx-wrapper > x-text:defined,
 inline-text > lynx-wrapper > inline-text:defined,
@@ -89,6 +55,8 @@ x-text > lynx-wrapper > x:defined,
 inline-truncation > lynx-wrapper > inline-text:defined,
 inline-truncation > lynx-wrapper > x-text:defined {
   display: inline;
+  background-clip: inherit;
+  -webkit-background-clip: inherit;
 }
 
 x-text > inline-image:defined,

package/dist/XFoldViewNg/XFoldviewHeaderNgFeatures.d.ts

@@ -1,9 +0,0 @@
-import type { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import type { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
-export declare class XFoldviewHeaderNgFeatures implements InstanceType<AttributeReactiveClass<typeof XFoldviewHeaderNg>> {
-    #private;
-    static observedAttributes: never[];
-    constructor(dom: XFoldviewHeaderNg);
-    connectedCallback(): void;
-    dispose(): void;
-}

package/dist/XFoldViewNg/XFoldviewHeaderNgFeatures.js

@@ -1,32 +0,0 @@
-export class XFoldviewHeaderNgFeatures {
-    #dom;
-    #resizeObserver;
-    static observedAttributes = [];
-    constructor(dom) {
-        this.#dom = dom;
-    }
-    connectedCallback() {
-        this.#resizeObserver = new ResizeObserver(([resize]) => {
-            const parentElement = this.#dom.parentElement;
-            if (parentElement?.tagName === 'X-FOLDVIEW-NG') {
-                const slot = parentElement.querySelector('x-foldview-slot-ng');
-                if (slot) {
-                    const offsetTop = slot.offsetTop;
-                    const headerHeight = resize.contentRect.height;
-                    if (offsetTop < headerHeight) {
-                        slot.style.top = headerHeight - offsetTop + 'px';
-                        parentElement.__scrollableLength = headerHeight - offsetTop;
-                    }
-                }
-            }
-        });
-        this.#resizeObserver.observe(this.#dom);
-    }
-    dispose() {
-        if (this.#resizeObserver) {
-            this.#resizeObserver.disconnect();
-            this.#resizeObserver = undefined;
-        }
-    }
-}
-//# sourceMappingURL=XFoldviewHeaderNgFeatures.js.map

package/dist/common/Exposure.d.ts

@@ -1,32 +0,0 @@
-export interface ExposureParameters {
-    exposureID: string | null;
-    exposureArea: string | null;
-    exposureScene: string | null;
-    exposureScreenMarginTop: string | null;
-    exposureScreenMarginRight: string | null;
-    exposureScreenMarginBottom: string | null;
-    exposureScreenMarginLeft: string | null;
-    exposureUIMarginTop: string | null;
-    exposureUIMarginRight: string | null;
-    exposureUIMarginBottom: string | null;
-    exposureUIMarginLeft: string | null;
-}
-export interface ExposureEvent {
-    'exposure-id': string;
-    'exposure-scene': string;
-    exposureID: string;
-    exposureScene: string;
-}
-export declare class LynxExposure {
-    #private;
-    static readonly observedAttributes: string[];
-    constructor(currentElement: HTMLElement);
-    onExposureParamsChanged: () => void;
-    onExposureIdChanged(_: string | null, oldValue: string | null): void;
-    attributeChangedHandler: this;
-    eventStatusChangedHandler: {
-        uiappear: (status: boolean) => void;
-        uidisappear: (status: boolean) => void;
-    };
-    disableExposure(): void;
-}