@lynx-js/web-elements 0.2.4

package/src/XText/x-text.css

@@ -0,0 +1,272 @@
+/*
+// 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.
+*/
+/* :defined chrome 54,firefox 63, safari 10 */
+x-text {
+  display: flex;
+  overflow-wrap: break-word;
+  --lynx-color: none;
+  align-items: stretch;
+}
+x-text:not(:defined) {
+  display: none;
+}
+
+x-text > * {
+  display: none;
+}
+
+x-text::part(inner-box) {
+  text-overflow: inherit;
+  --lynx-color: inherit;
+  --lynx-color-gradient: 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,);
+}
+
+/** 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
+    );
+  }
+}
+inline-text, inline-image, inline-truncation {
+  display: none;
+}
+
+/* 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,
+x-text > lynx-wrapper > x:defined,
+inline-truncation > lynx-wrapper > inline-text:defined,
+inline-truncation > lynx-wrapper > x-text:defined {
+  display: inline;
+}
+
+x-text > inline-image:defined,
+x-text > x-image:defined,
+inline-truncation > inline-image:defined,
+inline-truncation > x-image:defined,
+inline-text > inline-image:defined,
+inline-text > x-image:defined,
+x-text > lynx-wrapper > inline-image:defined,
+x-text > lynx-wrapper > x-image:defined,
+inline-truncation > lynx-wrapper > inline-image:defined,
+inline-truncation > lynx-wrapper > x-image:defined,
+inline-text > lynx-wrapper > inline-image:defined,
+inline-text > lynx-wrapper > x-image:defined {
+  display: contents !important;
+}
+x-text > x-view, x-text > lynx-wrapper > x-view {
+  display: inline-flex !important;
+}
+x-text > x-view,
+x-text[x-show-inline-truncation] > inline-truncation,
+x-text > lynx-wrapper > x-view,
+x-text[x-show-inline-truncation] > lynx-wrapper > inline-truncation {
+  display: inline-flex;
+}
+x-text > inline-truncation:first-child,
+x-text > lynx-wrapper > inline-truncation:first-child {
+  max-width: 100%;
+}
+
+inline-truncation ~ inline-truncation {
+  display: none;
+}
+
+inline-truncation[x-text-clipped] {
+  flex-direction: row;
+}
+
+inline-image::part(img) {
+  display: inline-block;
+  height: inherit;
+  width: inherit;
+  border: inherit;
+  border-radius: inherit;
+  background-color: inherit;
+  vertical-align: inherit;
+  margin: inherit;
+}
+
+x-text > x-image::part(img),
+x-text > lynx-wrapper > x-image::part(img),
+inline-truncation > x-image::part(img),
+inline-truncation > lynx-wrapper > x-image::part(img) {
+  display: inline-block;
+  height: inherit !important;
+  width: inherit !important;
+  border: inherit;
+  border-radius: inherit;
+  background-color: inherit;
+  vertical-align: inherit;
+  margin: inherit;
+  flex: inherit !important;
+  object-fit: inherit;
+  align-self: inherit !important;
+}
+
+/* attribute text-selection */
+
+x-text, inline-text, inline-image, inline-truncation {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+x-text::part(inner-box) {
+  height: 100%;
+  width: 100%;
+  overflow: inherit;
+}
+
+x-text[text-maxline] {
+  overflow: hidden;
+}
+
+x-text[text-selection],
+x-text[text-selection] > inline-text,
+x-text[text-selection] > x-text,
+x-text[text-selection] > inline-image,
+x-text[text-selection] > x-image,
+x-text[text-selection] > inline-truncation,
+x-text[text-selection] > lynx-wrapper > inline-text,
+x-text[text-selection] > lynx-wrapper > x-text,
+x-text[text-selection] > lynx-wrapper > inline-image,
+x-text[text-selection] > lynx-wrapper > x-image,
+x-text[text-selection] > lynx-wrapper > inline-truncation {
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+x-text[x-text-clipped] > [x-text-clipped]:not(inline-truncation),
+x-text[x-text-clipped]
+  > lynx-wrapper
+  > [x-text-clipped]:not(inline-truncation) {
+  display: none !important;
+}
+
+x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box):after,
+x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box)::after {
+  content: "...";
+}
+
+x-text[x-text-clipped]:has(inline-truncation)::part(inner-box):after,
+x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box):after,
+x-text[x-text-clipped]:has(inline-truncation)::part(inner-box)::after,
+x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
+  content: "" !important;
+}
+
+/* attribute text-maxline */
+/* In most cases, we do not need to analyze the text layout in Javascript
+ * On the following situations, we don't need to do line-clamp
+ * 1. no text-maxline setting
+ * 2. text-maxline is 0(display:none);
+ * 
+ * On the following situations, we just use the -webkit-line-clamp to implement
+ * 1. without customized inline-truncation
+ * 2. users do not force we apply styles on the ellipsis
+ *
+ * Overall, we do calculate the layout of texts with (dispaly:block) for
+ * 1. analyze the truncation length for a customized inline-truncation (attribute x-text-custom-overflow, selector :has())
+ * 2. users explicit declare that we have to put the ellipsis in place. (with attribute tail-color-convert='false')
+ */
+/* ::part chrome 73, firefox 72, safari 13.4 */
+/* :has() chrome 105, firefox 121, safari 15.1 */
+x-text[text-maxline]::part(inner-box) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+x-text[text-maxline="0"] {
+  display: none;
+}
+
+@supports not selector(:has(inline-truncation)) {
+  x-text[text-maxline="1"]:not([tail-color-convert="false"]):not([x-text-custom-overflow])::part(inner-box) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+@supports selector(:has(inline-truncation)) {
+  /* text-wrap  chrome 114, firefox 121, safari 17.4*/
+  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(inline-truncation))::part(inner-box) {
+    text-wrap: nowrap;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+x-text[text-maxline="1"] {
+  /* This is the stretch size */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
+  max-width: -moz-available;
+  max-width: -webkit-fill-available;
+}
+x-text[text-maxline="1"]:not([tail-color-convert="false"])::part(inner-box) {
+  display: block;
+}
+
+x-text[text-maxline][x-text-custom-overflow]::part(inner-box),
+x-text[text-maxline]:has(inline-truncation)::part(inner-box),
+x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
+  display: block !important;
+}
+
+raw-text {
+  display: none;
+}
+x-text > raw-text,
+inline-text > raw-text,
+x-text > lynx-wrapper > raw-text,
+inline-text > lynx-wrapper > raw-text {
+  display: contents !important;
+}

package/src/XTextarea/x-textarea.css

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

package/src/XViewpagerNg/x-viewpager-ng.css

@@ -0,0 +1,68 @@
+/*
+// 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-viewpager-ng, x-viewpager-item-ng {
+  display: none;
+}
+
+x-viewpager-ng:defined,
+x-viewpager-ng > x-viewpager-item-ng:defined,
+x-viewpager-ng > lynx-wrapper > x-viewpager-item-ng:defined {
+  display: flex;
+}
+
+x-viewpager-ng {
+  flex-direction: row;
+  contain: content;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: clip;
+  scrollbar-width: 0;
+  flex-direction: row;
+  --lynx-linear-orientation: horizontal;
+  scroll-snap-type: x mandatory;
+  scroll-snap-stop: always;
+}
+
+x-viewpager-ng[allow-horizontal-gesture="false"],
+x-viewpager-ng[enable-scroll="false"] {
+  overflow-x: hidden;
+}
+
+x-viewpager-ng::-webkit-scrollbar {
+  display: none;
+}
+
+x-viewpager-ng::part(content) {
+  scroll-snap-align: start;
+}
+
+x-viewpager-ng[bounces]::part(bounce-padding) {
+  display: flex;
+}
+
+@supports not (overflow: clip) {
+  x-viewpager-ng {
+    overflow-y: hidden;
+  }
+}
+
+x-viewpager-item-ng {
+  width: 100%;
+  height: 100%;
+  contain: content;
+  flex: 0 0 auto;
+  --flex-grow: 0;
+  --flex-shrink: 0;
+  --flex-basis: auto;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  position: relative !important;
+}
+
+x-viewpager-item-ng:nth-child(n+5) {
+  contain: strict;
+}