@lynx-js/web-elements 0.2.4

package/dist/common/throttle.js

@@ -0,0 +1,40 @@
+// 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.
+export const throttle = function (func, wait, options) {
+    let timeout;
+    let context;
+    let args;
+    let result;
+    let previous = 0;
+    var later = function () {
+        previous = options?.leading === false ? 0 : new Date().getTime();
+        timeout = null;
+        result = func.apply(context, args);
+        if (!timeout)
+            context = args = null;
+    };
+    return function () {
+        var now = new Date().getTime();
+        if (!previous && options?.leading === false)
+            previous = now;
+        var remaining = wait - (now - previous);
+        context = this;
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = func.apply(context, args);
+            if (!timeout)
+                context = args = null;
+        }
+        else if (!timeout && options?.trailing !== false) {
+            timeout = setTimeout(later, remaining);
+        }
+        return result;
+    };
+};
+//# sourceMappingURL=throttle.js.map

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,8 @@
+// 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.
+export * from '@lynx-js/web-elements-reactive';
+export * from './common/Exposure.js';
+export * from './common/commonEventInitConfiguration.js';
+export * from './common/constants.js';
+//# sourceMappingURL=index.js.map

package/dist/lazy.d.ts

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

package/dist/lazy.js

@@ -0,0 +1,106 @@
+// 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

package/index.css

@@ -0,0 +1,19 @@
+/* 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 url("./src/common-css/linear.css");
+@import url("./src/LynxWrapper/lynx-wrapper.css");
+@import url("./src/XText/x-text.css");
+@import url("./src/ScrollView/scroll-view.css");
+@import url("./src/XFoldViewNg/x-foldview-ng.css");
+@import url("./src/XViewpagerNg/x-viewpager-ng.css");
+@import url("./src/XCanvas/x-canvas.css");
+@import url("./src/XSvg/x-svg.css");
+@import url("./src/XImage/x-image.css");
+@import url("./src/XInput/x-input.css");
+@import url("./src/XOverlayNg/x-overlay-ng.css");
+@import url("./src/XRefreshView/x-refresh-view.css");
+@import url("./src/XSwiper/x-swiper.css");
+@import url("./src/XTextarea/x-textarea.css");
+@import url("./src/XList/x-list.css");

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@lynx-js/web-elements",
+  "version": "0.2.4",
+  "private": false,
+  "license": "Apache-2.0",
+  "sideEffects": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./index.css": {
+      "default": "./index.css"
+    },
+    "./all": {
+      "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"
+    },
+    "./ScrollView": {
+      "types": "./dist/ScrollView/index.d.ts",
+      "default": "./dist/ScrollView/index.js"
+    },
+    "./XAudioTT": {
+      "types": "./dist/XAudioTT/index.d.ts",
+      "default": "./dist/XAudioTT/index.js"
+    },
+    "./XCanvas": {
+      "types": "./dist/XCanvas/index.d.ts",
+      "default": "./dist/XCanvas/index.js"
+    },
+    "./XFoldViewNg": {
+      "types": "./dist/XFoldViewNg/index.d.ts",
+      "default": "./dist/XFoldViewNg/index.js"
+    },
+    "./XImage": {
+      "types": "./dist/XImage/index.d.ts",
+      "default": "./dist/XImage/index.js"
+    },
+    "./XInput": {
+      "types": "./dist/XInput/index.d.ts",
+      "default": "./dist/XInput/index.js"
+    },
+    "./XOverlayNg": {
+      "types": "./dist/XOverlayNg/index.d.ts",
+      "default": "./dist/XOverlayNg/index.js"
+    },
+    "./XRefreshView": {
+      "types": "./dist/XRefreshView/index.d.ts",
+      "default": "./dist/XRefreshView/index.js"
+    },
+    "./XSvg": {
+      "types": "./dist/XSvg/index.d.ts",
+      "default": "./dist/XSvg/index.js"
+    },
+    "./XSwiper": {
+      "types": "./dist/XSwiper/index.d.ts",
+      "default": "./dist/XSwiper/index.js"
+    },
+    "./XText": {
+      "types": "./dist/XText/index.d.ts",
+      "default": "./dist/XText/index.js"
+    },
+    "./XTextarea": {
+      "types": "./dist/XTextarea/index.d.ts",
+      "default": "./dist/XTextarea/index.js"
+    },
+    "./XView": {
+      "types": "./dist/XView/index.d.ts",
+      "default": "./dist/XView/index.js"
+    },
+    "./XViewpagerNg": {
+      "types": "./dist/XViewpagerNg/index.d.ts",
+      "default": "./dist/XViewpagerNg/index.js"
+    },
+    "./XList": {
+      "types": "./dist/XList/index.d.ts",
+      "default": "./dist/XList/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.js.map",
+    "LICENSE.txt",
+    "Notice.txt",
+    "CHANGELOG.md",
+    "README.md",
+    "index.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@lynx-js/web-elements-reactive": "0.1.0"
+  },
+  "devDependencies": {
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "tslib": "^2.5.0"
+  }
+}

package/src/LynxWrapper/lynx-wrapper.css

@@ -0,0 +1,12 @@
+/**
+// 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.
+*/
+lynx-wrapper {
+  display: contents !important;
+  --lynx-display: inherit;
+  --lynx-display-toggle: inherit;
+  --lynx-linear-orientation: inherit;
+  --lynx-linear-orientation-toggle: inherit;
+}

package/src/ScrollView/scroll-view.css

@@ -0,0 +1,121 @@
+/*
+// 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.
+*/
+scroll-view {
+  contain: content;
+  display: flex !important;
+  --lynx-display: linear !important;
+  --lynx-display-toggle: var(--lynx-display-linear);
+  flex-wrap: nowrap;
+  flex-direction: var(--linear-flex-direction);
+  justify-content: var(--linear-justify-content);
+  scroll-timeline: --scroll-view-timeline;
+}
+
+/**
+ * The scroll-view would always be a linear container
+ * see linear.css
+ */
+scroll-view > *, scroll-view > lynx-wrapper > * {
+  flex-shrink: 0;
+  flex-grow: calc(var(--lynx-linear-weight) / var(--lynx-linear-weight-sum));
+  flex-basis: var(--lynx-linear-weight-basis);
+  align-self: var(--align-self-column);
+}
+
+scroll-view, scroll-view {
+  scrollbar-width: none;
+}
+
+scroll-view::-webkit-scrollbar, scroll-view::-webkit-scrollbar {
+  display: none;
+}
+
+scroll-view[enable-scrollbar], scroll-view[scroll-bar-enable] {
+  scrollbar-width: initial;
+}
+
+scroll-view[enable-scrollbar]::-webkit-scrollbar,
+scroll-view[scroll-bar-enable]::-webkit-scrollbar {
+  display: initial;
+}
+
+scroll-view, scroll-view[scroll-y], scroll-view[scroll-orientation="vertical"] {
+  overflow-y: scroll !important;
+  overflow-x: clip !important;
+  flex-direction: column !important;
+  --lynx-linear-orientation: vertical !important;
+  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+}
+
+scroll-view[scroll-x], scroll-view[scroll-orientation="horizontal"] {
+  overflow-y: clip !important;
+  overflow-x: scroll !important;
+  flex-direction: row !important;
+  --lynx-linear-orientation: horizontal !important;
+  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal);
+}
+
+scroll-view[scroll-orientation="both"] {
+  overflow: scroll !important;
+}
+
+@supports not (overflow: clip) {
+  scroll-view[scroll-y], scroll-view[scroll-orientation="vertical"] {
+    overflow-x: hidden;
+  }
+
+  scroll-view[scroll-x], scroll-view[scroll-orientation="horizontal"] {
+    overflow-y: hidden;
+  }
+}
+
+scroll-view[scroll-y][enable-scroll="false"],
+scroll-view[scroll-orientation="vertical"][enable-scroll="false"] {
+  overflow-y: hidden !important;
+}
+
+scroll-view[scroll-x][enable-scroll="false"],
+scroll-view[scroll-orientation="horizontal"][enable-scroll="false"] {
+  overflow-x: hidden !important;
+}
+
+@supports (animation-timeline: --scroll-view-timeline) {
+  /* 
+    https://chromestatus.com/feature/6752840701706240 It notes that this feature is actively implementing in webkit and gecko.
+    chrome 115, firefox no, safari no
+  */
+  scroll-view[fading-edge-length]::part(top-fade-mask) {
+    top: 0;
+    animation-name: topFading;
+  }
+  scroll-view[fading-edge-length]::part(bot-fade-mask) {
+    bottom: 0;
+    animation-name: botFading;
+  }
+  scroll-view[fading-edge-length]::part(top-fade-mask),
+  scroll-view[fading-edge-length]::part(bot-fade-mask) {
+    left: 0;
+    display: flex;
+    flex: 0 0 auto;
+    animation-duration: 1ms;
+    animation-timeline: --scroll-view-timeline;
+  }
+}
+
+scroll-view[x-enable-scrolltolower-event]::part(lower-threshold-observer),
+scroll-view[x-enable-scrolltoupper-event]::part(upper-threshold-observer) {
+  display: flex;
+}
+
+scroll-view[scroll-y][x-enable-scrolltolower-event]::part(lower-threshold-observer),
+scroll-view[scroll-orientation="vertical"][x-enable-scrolltolower-event]::part(lower-threshold-observer) {
+  flex-direction: column-reverse !important;
+}
+
+scroll-view[scroll-x][x-enable-scrolltolower-event]::part(lower-threshold-observer),
+scroll-view[scroll-orientation="horizontal"][x-enable-scrolltolower-event]::part(lower-threshold-observer) {
+  flex-direction: row-reverse !important;
+}

package/src/XAudioTT/x-audio-tt.css

@@ -0,0 +1,3 @@
+x-audio-tt {
+  display: none;
+}

package/src/XCanvas/x-canvas.css

@@ -0,0 +1,16 @@
+/*
+// 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.
+*/
+x-canvas {
+  contain: strict;
+  flex-direction: column;
+}
+x-canvas > * {
+  display: none !important;
+}
+x-canvas::part {
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,80 @@
+/*
+// 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.
+*/
+x-foldview-ng {
+  display: flex;
+  overflow-y: scroll;
+  overflow-x: clip;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  contain: content;
+  --foldview-header-height: 0px;
+  scrollbar-width: none;
+}
+
+x-foldivew-ng::-webkit-scrollbar {
+  display: none;
+}
+
+x-foldview-ng[scroll-bar-enable] {
+  scrollbar-width: initial;
+}
+
+x-foldview-ng[scroll-bar-enable]::-webkit-scrollbar {
+  display: initial;
+}
+
+x-foldview-ng:not([scroll-bar-enable], [scroll-bar-enable="true"])::-webkit-scrollbar {
+  display: none;
+}
+
+x-foldview-ng[scroll-enable="false"] {
+  overflow-y: hidden;
+}
+
+x-foldview-ng > *,
+x-foldview-header-ng,
+x-foldview-slot-ng,
+x-foldview-toolbar-ng {
+  display: none;
+}
+
+x-foldview-ng > x-foldview-header-ng,
+x-foldview-ng > x-foldview-slot-ng,
+x-foldview-ng > x-foldview-toolbar-ng,
+x-foldview-ng > lynx-wrapper > x-foldview-header-ng,
+x-foldview-ng > lynx-wrapper > x-foldview-slot-ng,
+x-foldview-ng > lynx-wrapper > x-foldview-toolbar-ng {
+  display: flex;
+}
+x-foldview-toolbar-ng {
+  order: 1;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+x-foldview-header-ng {
+  order: 2;
+  flex: 0 0 auto;
+  position: absolute;
+}
+
+x-foldview-ng[header-over-slot] > x-foldview-slot-ng,
+x-foldview-ng[header-over-slot] > lynx-wrapper > x-foldview-slot-ng {
+  z-index: 1;
+}
+
+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/XImage/x-image.css

@@ -0,0 +1,82 @@
+/*
+// 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.
+*/
+x-image, filter-image {
+  align-items: center;
+  justify-content: center;
+  --justify-content: center;
+  flex-direction: row !important;
+  contain: strict;
+  object-fit: fill;
+}
+
+x-image > *,
+filter-image > *,
+x-image:not(:defined),
+filter-image:not(:defined) {
+  display: none;
+}
+
+x-image[blur-radius]::part(img) {
+  --blur-radius: 0;
+  filter: blur(var(--blur-radius));
+}
+
+filter-image[blur-radius]::part(img), filter-image[drop-shadow]::part(img) {
+  --blur-radius: 0;
+  --drop-shadow: 0px 0px;
+  filter: blur(var(--blur-radius)) drop-shadow(var(--drop-shadow));
+}
+
+x-image:not([auto-size])::part(img), filter-image::part(img) {
+  width: 100%;
+  flex: 0 0 100%;
+  align-self: stretch;
+  object-fit: inherit;
+}
+
+x-image[mode="aspectFit"], filter-image[mode="aspectFit"] {
+  object-fit: contain;
+}
+
+x-image[mode="aspectFill"], filter-image[mode="aspectFill"] {
+  object-fit: cover;
+}
+
+x-image[mode="center"]:not([auto-size])::part(img),
+filter-image[mode="center"]::part(img) {
+  position: absolute;
+  margin: auto;
+  width: unset;
+  flex: unset;
+  align-self: unset;
+}
+
+x-image[auto-size] {
+  display: contents;
+}
+
+x-image[auto-size]::part(img) {
+  margin: inherit;
+  padding: inherit;
+  width: inherit;
+  height: inherit;
+  box-sizing: inherit;
+  flex: inherit;
+  min-width: inherit;
+  min-height: inherit;
+  border: inherit;
+  max-width: 100%;
+  max-height: 100%;
+  position: inherit;
+  top: inherit;
+  left: inherit;
+  right: inherit;
+  bottom: inherit;
+  transform: inherit;
+  opacity: inherit;
+  z-index: inherit;
+  filter: inherit;
+}

package/src/XInput/x-input.css

@@ -0,0 +1,48 @@
+/*
+// 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.
+*/
+x-input {
+  display: none;
+}
+
+x-input:defined {
+  display: contents;
+}
+
+x-input::part(form) {
+  display: contents;
+}
+x-input::part(input), x-input::part(form) {
+  width: inherit;
+  height: inherit;
+  border: inherit;
+  align-self: inherit;
+  justify-self: inherit;
+  text-align: inherit;
+  direction: inherit;
+  caret-color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  flex: inherit;
+  background-color: inherit;
+  z-index: inherit;
+  margin: inherit;
+  color: inherit;
+}
+
+x-input::part(input) {
+  --placeholder-color: grey;
+  --placeholder-font-size: 14px;
+  --placeholder-font-weight: normal;
+}
+
+x-input::part(input)::placeholder {
+  color: var(--placeholder-color);
+  font-family: var(--placeholder-font-family);
+  font-size: var(--placeholder-font-size);
+  font-weight: var(--placeholder-font-weight);
+}