timered-counter 0.0.3 → 0.0.5

package/dist/src/timered-counter-string.js.map

@@ -1 +1 @@
-{"version":3,"file":"timered-counter-string.js","sourceRoot":"","sources":["../../src/timered-counter-string.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { PropertyValues } from 'lit';\nimport { isEmpty, isString } from 'remeda';\nimport { TimeredCounter } from './timered-counter.js';\nimport { timeredCounterStringStyles } from './styles/timered-counter-string-styles.js';\nimport { anyBase } from './utils/any-base.js';\nimport { PartsOptions } from './mixins/counter-parts.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\n\n/**\n * 替换一些特定的字符.\n * 1. \" \": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \\xa0 替换.\n */\nconst REPLACED_CHARS: Record<string, string> = {\n  ' ': '\\xa0', // &nbsp;\n};\n\n@customElement('timered-counter-string')\nexport class TimeredCounterString extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterStringStyles];\n\n  // /**\n  //  * 自定义字符集, 传入的 `value` 的字符串表示形式的每个字符都**必须**被包含在该字符集中.\n  //  *\n  //  * @default `value` 的去重字符集.\n  //  */\n  // @property({\n  //   reflect: true,\n  // })\n  private __alphabet: string = '';\n\n  private __initialValueString = '';\n\n  get initialValue() {\n    return super.initialValue;\n  }\n\n  set initialValue(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    }\n\n    this.__initialValueString = value ?? '';\n\n    if (isEmpty(this.__alphabet) || isEmpty(this.__initialValueString)) {\n      super.initialValue = this.numberAdapter.create(0);\n      return;\n    }\n\n    super.initialValue = this.numberAdapter.create(\n      this.__anyBaseToDecimal(value),\n    );\n  }\n\n  private __valueString = '';\n\n  private __oldValueString = '';\n\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * 通过 property 设置 value 时, 支持任意字符串.\n   */\n  set value(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    } else if (this.__valueString === value) {\n      return;\n    }\n\n    this.__oldValueString = this.__valueString;\n    this.__valueString = value ?? '';\n\n    if (isEmpty(this.__valueString)) {\n      super.value = this.numberAdapter.create(0);\n      return;\n    }\n\n    const oldValueString = isEmpty(this.__alphabet)\n      ? ''\n      : this.__decimalToAnyBase(this.numberAdapter.toString(this.value));\n\n    this.__updateAlphabet(this.__valueString, oldValueString);\n\n    /**\n     * 由于 oldValue 基于之前的 `__alphabet` 计算, 当 通过 `__updateAlphabet` 更新 `__alphabet` 后, 需要同步更新 oldValue.\n     */\n    super.oldValue = this.numberAdapter.create(\n      this.__anyBaseToDecimal(this.__oldValueString),\n    );\n\n    super.value = this.numberAdapter.create(\n      this.__anyBaseToDecimal(this.__valueString),\n    );\n  }\n\n  private __partsOptions: Partial<PartsOptions> | null = null;\n\n  get partsOptions(): Partial<PartsOptions> {\n    return super.partsOptions;\n  }\n\n  set partsOptions(value: Partial<PartsOptions>) {\n    this.__partsOptions = value;\n    super.partsOptions = {\n      type: 'string',\n      fillChar: REPLACED_CHARS[' '],\n      ...this.__partsOptions,\n      digitToChar: {\n        ' ': REPLACED_CHARS[' '],\n        ...this.__partsOptions.digitToChar,\n      },\n    };\n  }\n\n  /**\n   * 根据 `value`, `initialValue`, `oldValue` 更新字符集.\n   * @private\n   */\n  private __updateAlphabet(value: string, oldValue: string) {\n    const allChars =\n      isEmpty(value) && isEmpty(oldValue)\n        ? ''\n        : `\\x00${oldValue ?? ''}${value ?? ''}`;\n\n    const charSet = new Set(this.stringAdapter.stringToChars(allChars));\n    // if (charSet.size < 10) {\n    //   for (let i = 0; i < 10; i++) {\n    //     charSet.add(i.toString());\n    //     if (charSet.size >= 10) break;\n    //   }\n    // }\n\n    this.__alphabet = Array.from(charSet).sort().join('');\n\n    const sa = this.stringAdapter;\n    const alphabet = this.__alphabet;\n\n    this.__decimalToAnyBase = anyBase(sa, '0123456789', alphabet);\n    this.__anyBaseToDecimal = anyBase(sa, alphabet, '0123456789');\n  }\n\n  private __decimalToAnyBase = anyBase(\n    this.stringAdapter,\n    '0123456789',\n    this.__alphabet,\n  );\n\n  private __anyBaseToDecimal = anyBase(\n    this.stringAdapter,\n    this.__alphabet,\n    '0123456789',\n  );\n\n  override sampleToString(value: AvailableNumberAdapterValueType): string {\n    return this.__decimalToAnyBase(this.numberAdapter.toString(value));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.__updateAlphabet(this.__valueString, this.__initialValueString);\n    this.initialValue = this.__initialValueString;\n    this.value = this.__valueString;\n  }\n\n  override firstUpdated(_changedProperties: PropertyValues<this>) {\n    super.firstUpdated(_changedProperties);\n\n    /**\n     * TimeredCounterString 有自定义的 `fillChar` 和 `digitToChar`. 实例化时需要手动触发 `partsOptions` 的 setter.\n     */\n    this.partsOptions = this.__partsOptions ?? {};\n  }\n}\n"]}
+{"version":3,"file":"timered-counter-string.js","sourceRoot":"","sources":["../../src/timered-counter-string.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { isEmpty, isString } from 'remeda';\nimport { TimeredCounter } from './timered-counter.js';\nimport { timeredCounterStringStyles } from './styles/timered-counter-string-styles.js';\nimport { anyBase } from './utils/any-base.js';\nimport { PartsOptions } from './mixins/counter-parts.js';\nimport { AvailableNumberAdapterValueType } from './number-adapter/index.js';\n\n/**\n * 替换一些特定的字符.\n * 1. \" \": 空格字符在 HTML 中会被忽略导致无法计算字符宽度, 使用 \\xa0 替换.\n */\nconst REPLACED_CHARS: Record<string, string> = {\n  ' ': '\\xa0', // &nbsp;\n};\n\n@customElement('timered-counter-string')\nexport class TimeredCounterString extends TimeredCounter {\n  static styles = [...TimeredCounter.styles, timeredCounterStringStyles];\n\n  // /**\n  //  * 自定义字符集, 传入的 `value` 的字符串表示形式的每个字符都**必须**被包含在该字符集中.\n  //  *\n  //  * @default `value` 的去重字符集.\n  //  */\n  // @property({\n  //   reflect: true,\n  // })\n  private __alphabet: string = '';\n\n  private __initialValueString = '';\n\n  get initialValue() {\n    return super.initialValue;\n  }\n\n  set initialValue(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    }\n\n    this.__initialValueString = value ?? '';\n\n    if (isEmpty(this.__alphabet) || isEmpty(this.__initialValueString)) {\n      super.initialValue = this.numberAdapter.create(0);\n      return;\n    }\n\n    super.initialValue = this.numberAdapter.create(\n      this.__anyBaseToDecimal(value),\n    );\n  }\n\n  private __valueString = '';\n\n  private __oldValueString = '';\n\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * 通过 property 设置 value 时, 支持任意字符串.\n   */\n  set value(value: any) {\n    if (!isString(value)) {\n      try {\n        value = value.toString();\n      } catch (error) {\n        throw new Error(`value ${value} is not a string.`);\n      }\n    } else if (this.__valueString === value) {\n      return;\n    }\n\n    this.__oldValueString = this.__valueString;\n    this.__valueString = value ?? '';\n\n    if (isEmpty(this.__valueString)) {\n      super.value = this.numberAdapter.create(0);\n      return;\n    }\n\n    const oldValueString = this.__oldValueString || this.__initialValueString;\n\n    this.__updateAlphabet(this.__valueString, oldValueString);\n\n    /**\n     * 由于 oldValue 基于之前的 `__alphabet` 计算, 当 通过 `__updateAlphabet` 更新 `__alphabet` 后, 需要同步更新 oldValue.\n     */\n    super.oldValue = this.numberAdapter.create(\n      this.__anyBaseToDecimal(oldValueString),\n    );\n\n    super.value = this.numberAdapter.create(\n      this.__anyBaseToDecimal(this.__valueString),\n    );\n  }\n\n  private __partsOptions: Partial<PartsOptions> | null = null;\n\n  get partsOptions(): Partial<PartsOptions> {\n    return super.partsOptions;\n  }\n\n  set partsOptions(value: Partial<PartsOptions>) {\n    this.__partsOptions = value;\n    super.partsOptions = {\n      type: 'string',\n      fillChar: REPLACED_CHARS[' '],\n      ...this.__partsOptions,\n      digitToChar: {\n        ' ': REPLACED_CHARS[' '],\n        ...this.__partsOptions.digitToChar,\n      },\n    };\n  }\n\n  /**\n   * 根据 `value`, `initialValue`, `oldValue` 更新字符集.\n   * @private\n   */\n  private __updateAlphabet(value: string, oldValue: string) {\n    const allChars =\n      isEmpty(value) && isEmpty(oldValue)\n        ? ''\n        : `\\x00${oldValue ?? ''}${value ?? ''}`;\n\n    const charSet = new Set(this.stringAdapter.stringToChars(allChars));\n    // if (charSet.size < 10) {\n    //   for (let i = 0; i < 10; i++) {\n    //     charSet.add(i.toString());\n    //     if (charSet.size >= 10) break;\n    //   }\n    // }\n\n    this.__alphabet = Array.from(charSet).sort().join('');\n\n    const sa = this.stringAdapter;\n    const alphabet = this.__alphabet;\n\n    this.__decimalToAnyBase = anyBase(sa, '0123456789', alphabet);\n    this.__anyBaseToDecimal = anyBase(sa, alphabet, '0123456789');\n  }\n\n  private __decimalToAnyBase = anyBase(\n    this.stringAdapter,\n    '0123456789',\n    this.__alphabet,\n  );\n\n  private __anyBaseToDecimal = anyBase(\n    this.stringAdapter,\n    this.__alphabet,\n    '0123456789',\n  );\n\n  override sampleToString(value: AvailableNumberAdapterValueType): string {\n    return this.__decimalToAnyBase(this.numberAdapter.toString(value));\n  }\n\n  override connectedCallback() {\n    this.__updateAlphabet(this.__valueString, this.__initialValueString);\n    this.initialValue = this.__initialValueString;\n    this.value = this.__valueString;\n\n    /**\n     * TimeredCounterString 有自定义的 `fillChar` 和 `digitToChar`. 实例化时需要手动触发 `partsOptions` 的 setter.\n     */\n    this.partsOptions = this.__partsOptions ?? {};\n\n    super.connectedCallback();\n    console.log('as');\n  }\n}\n"]}

package/dist/src/timered-counter.js

@@ -34,7 +34,8 @@ let TimeredCounter = class TimeredCounter extends CounterAiraMixin(CounterAnimat
         const keyframes = this.extractKeyframes();
         return html `
       <timered-counter-roller
-        exportparts="prefix, suffix, part-suffix"
+        exportparts="group, part, digit, cell, prefix, suffix, part-suffix"
+        part="group"
         class="timered-counter"
         aria-hidden="true"
         color=${this.color}

package/dist/src/timered-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"timered-counter.js","sourceRoot":"","sources":["../../src/timered-counter.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { CounterStylesMixin } from './mixins/counter-styles.js';\nimport { CounterPartsMixin } from './mixins/counter-parts.js';\nimport { CounterBaseMixin } from './mixins/counter-base.js';\nimport { timeredCounterStyles } from './styles/timered-counter-styles.js';\nimport { CounterAnimationMixin } from './mixins/counter-animation.js';\nimport './transitions/roller/index.js';\nimport { CounterAiraMixin } from './mixins/counter-aira.js';\n\nclass TimeredCounterAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter')\nexport class TimeredCounter extends CounterAiraMixin(\n  CounterAnimationMixin(\n    CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))),\n  ),\n) {\n  static styles = [timeredCounterStyles];\n\n  resizeObserver: ResizeObserver;\n\n  @state()\n  partsContainerRect: DOMRect | undefined;\n\n  @query('timered-counter-roller')\n  partsContainer: HTMLElement | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.partsContainerRect = this.partsContainer\n        ? this.partsContainer.getBoundingClientRect()\n        : new DOMRect();\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.partsContainer) {\n      this.resizeObserver.observe(this.partsContainer);\n    }\n  }\n\n  render() {\n    const cellStyles = this.extractCellStyles();\n    const digitStyles = this.extractDigitStyles();\n    const partStyles = this.extractPartStyles();\n\n    const animationOptions = this.extractAnimationOptions();\n    const keyframes = this.extractKeyframes();\n\n    return html`\n      <timered-counter-roller\n        exportparts=\"prefix, suffix, part-suffix\"\n        class=\"timered-counter\"\n        aria-hidden=\"true\"\n        color=${this.color}\n        .parentContainerRect=${this.partsContainerRect}\n        .parts=${this.parts}\n        .partPreprocessDataList=${this.partPreprocessDataList}\n        .animationOptions=${animationOptions}\n        .keyframes=${keyframes}\n        .cellStyles=${cellStyles}\n        .digitStyles=${digitStyles}\n        .partStyles=${partStyles}\n        .direction=${this.direction}\n        @roller-animation-start=${this.dispatchTimeredCounterAnimationStart}\n        @roller-animation-end=${this.dispatchTimeredCounterAnimationEnd}\n      >\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (_, partIndex) =>\n            html`<slot\n              name=${`part-suffix-${partIndex}`}\n              slot=${`part-suffix-${partIndex}`}\n            ></slot>`,\n        )}\n      </timered-counter-roller>\n    `;\n  }\n\n  dispatchTimeredCounterAnimationStart() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-start'),\n    );\n  }\n\n  dispatchTimeredCounterAnimationEnd() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-end'),\n    );\n  }\n}\n"]}
+{"version":3,"file":"timered-counter.js","sourceRoot":"","sources":["../../src/timered-counter.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { CounterStylesMixin } from './mixins/counter-styles.js';\nimport { CounterPartsMixin } from './mixins/counter-parts.js';\nimport { CounterBaseMixin } from './mixins/counter-base.js';\nimport { timeredCounterStyles } from './styles/timered-counter-styles.js';\nimport { CounterAnimationMixin } from './mixins/counter-animation.js';\nimport './transitions/roller/index.js';\nimport { CounterAiraMixin } from './mixins/counter-aira.js';\n\nclass TimeredCounterAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter')\nexport class TimeredCounter extends CounterAiraMixin(\n  CounterAnimationMixin(\n    CounterStylesMixin(CounterPartsMixin(CounterBaseMixin(LitElement))),\n  ),\n) {\n  static styles = [timeredCounterStyles];\n\n  resizeObserver: ResizeObserver;\n\n  @state()\n  partsContainerRect: DOMRect | undefined;\n\n  @query('timered-counter-roller')\n  partsContainer: HTMLElement | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.partsContainerRect = this.partsContainer\n        ? this.partsContainer.getBoundingClientRect()\n        : new DOMRect();\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.partsContainer) {\n      this.resizeObserver.observe(this.partsContainer);\n    }\n  }\n\n  render() {\n    const cellStyles = this.extractCellStyles();\n    const digitStyles = this.extractDigitStyles();\n    const partStyles = this.extractPartStyles();\n\n    const animationOptions = this.extractAnimationOptions();\n    const keyframes = this.extractKeyframes();\n\n    return html`\n      <timered-counter-roller\n        exportparts=\"group, part, digit, cell, prefix, suffix, part-suffix\"\n        part=\"group\"\n        class=\"timered-counter\"\n        aria-hidden=\"true\"\n        color=${this.color}\n        .parentContainerRect=${this.partsContainerRect}\n        .parts=${this.parts}\n        .partPreprocessDataList=${this.partPreprocessDataList}\n        .animationOptions=${animationOptions}\n        .keyframes=${keyframes}\n        .cellStyles=${cellStyles}\n        .digitStyles=${digitStyles}\n        .partStyles=${partStyles}\n        .direction=${this.direction}\n        @roller-animation-start=${this.dispatchTimeredCounterAnimationStart}\n        @roller-animation-end=${this.dispatchTimeredCounterAnimationEnd}\n      >\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (_, partIndex) =>\n            html`<slot\n              name=${`part-suffix-${partIndex}`}\n              slot=${`part-suffix-${partIndex}`}\n            ></slot>`,\n        )}\n      </timered-counter-roller>\n    `;\n  }\n\n  dispatchTimeredCounterAnimationStart() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-start'),\n    );\n  }\n\n  dispatchTimeredCounterAnimationEnd() {\n    this.dispatchEvent(\n      new TimeredCounterAnimationEvent('timered-counter-animation-end'),\n    );\n  }\n}\n"]}

package/dist/src/transitions/roller/roller-digit.js

@@ -6,7 +6,7 @@ import { intersection, isEmpty, isNullish, isString, merge, omit, range, } from
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { rollerDigitStyles } from './styles.js';
-import * as EasingFunctions from '../../easing/index.js';
+import * as EasingFunctions from '../../easing/penner-easing-functions.js';
 class RollerDigitAnimationEvent extends Event {
 }
 let TimeredCounterRollerDigit = class TimeredCounterRollerDigit extends LitElement {
@@ -62,25 +62,21 @@ let TimeredCounterRollerDigit = class TimeredCounterRollerDigit extends LitEleme
     }
     render() {
         const shadowCellStyle = this.cellStyle.map(style => omit(style, ['position']));
-        return html `
-      <span class="roller-part-digit">
-        <!--    占位      -->
-        <span
-          class="placeholder"
-          style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}
-        >
-          0
-        </span>
-        <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->
-        <span class="roll-list__shadow">
-          ${repeat(this.digit.data, (_, index) => index, (digit, index) => html `
-              <span style=${styleMap(shadowCellStyle[index])}>
-                ${digit}
-              </span>
-            `)}
-        </span>
-        <span
-          class=${classMap({
+        return html `<span class="roller-part-digit">
+      <!--    占位      -->
+      <span
+        class="placeholder"
+        style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}
+        >0</span
+      >
+      <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->
+      <span class="roll-list__shadow">
+        ${repeat(this.digit.data, (_, index) => index, (digit, index) => html `<span style=${styleMap(shadowCellStyle[index])}
+              >${digit}</span
+            >`)}
+      </span>
+      <span
+        class=${classMap({
             /**
              * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果
              * 向下同理
@@ -89,56 +85,51 @@ let TimeredCounterRollerDigit = class TimeredCounterRollerDigit extends LitEleme
             'roll-list__down': this.direction === 'down',
             'roll-list': true,
         })}
-        >
-          ${this.digit.data.length > 1
+      >
+        ${this.digit.data.length > 1
             ? repeat(this.digit.data, (_, index) => index, (digit, index) => {
                 if (this.direction === 'up' &&
                     index === this.digit.data.length - 1) {
                     return html `<span
-                      class="roll-item roll-item__head"
-                      style=${styleMap(this.cellStyle[index])}
-                    >
-                      <span style=${styleMap(this.textStyle)}
-                        >${digit}</span
-                      >
-                    </span>`;
+                    part="cell"
+                    class="roll-item roll-item__head"
+                    style=${styleMap(this.cellStyle[index])}
+                    ><span style=${styleMap(this.textStyle)}
+                      >${digit}</span
+                    ></span
+                  >`;
                 }
                 if (this.direction === 'down' && index === 0) {
                     return html `
-                      <span
-                        class="roll-item roll-item__tail"
-                        style=${styleMap(this.cellStyle[index])}
-                      >
-                        <span style=${styleMap(this.textStyle)}
-                          >${digit}</span
-                        >
-                      </span>
-                    `;
-                }
-                return html `
                     <span
-                      class="roll-item"
+                      part="cell"
+                      class="roll-item roll-item__tail"
                       style=${styleMap(this.cellStyle[index])}
-                    >
-                      <span style=${styleMap(this.textStyle)}
+                      ><span style=${styleMap(this.textStyle)}
                         >${digit}</span
-                      >
-                    </span>
+                      ></span
+                    >
                   `;
-            })
-            : html `
-                <span
+                }
+                return html `<span
+                  part="cell"
                   class="roll-item"
-                  style=${styleMap(this.cellStyle[0])}
-                >
-                  <span style=${styleMap(this.textStyle)}
-                    >${this.digit.data[0]}</span
-                  >
-                </span>
-              `}
-        </span>
-      </span>
-    `;
+                  style=${styleMap(this.cellStyle[index])}
+                  ><span style=${styleMap(this.textStyle)}
+                    >${digit}</span
+                  ></span
+                >`;
+            })
+            : html `<span
+              part="cell"
+              class="roll-item"
+              style=${styleMap(this.cellStyle[0])}
+              ><span style=${styleMap(this.textStyle)}
+                >${this.digit.data[0]}</span
+              ></span
+            >`}</span
+      ></span
+    > `;
     }
     shouldAnimate() {
         const { cancelPrevAnimation, animate } = this.preprocessData;

package/dist/src/transitions/roller/roller-digit.js.map

@@ -1 +1 @@
-{"version":3,"file":"roller-digit.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller-digit.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EACL,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,GACN,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,uBAAuB,CAAC;AAEzD,MAAM,yBAA0B,SAAQ,KAAK;CAI5C;AAGM,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IA4CvD;QACE,KAAK,EAAE,CAAC;QAzCV,UAAK,GAAkB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAG9C,mBAAc,GAAyB;YACrC,OAAO,EAAE,IAAI;YACb,mBAAmB,EAAE,KAAK;YAC1B,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,CAAC;SACd,CAAC;QAGF,cAAS,GAAkB,IAAI,CAAC;QAGhC,cAAS,GAAiC,EAAE,CAAC;QAG7C,cAAS,GAAmC,EAAE,CAAC;QAG/C,qBAAgB,GAA6B,EAAE,CAAC;QAGhD,cAAS,GAA6B,EAAE,CAAC;QASzC,eAAU,GAAW,CAAC,CAAC;QASrB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,CAChB,IAAI,CAAC,mBAAmB;gBACtB,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;gBAClD,CAAC,CAAC,IAAI,OAAO,EAAE,CAClB,CAAC,KAAK,CAAC;QACV,CAAC,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,kBAAwC;QAC7D,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QAEvC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAElC;;WAEG;QACH,IACE,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC,EAAE;YAClD,OAAO;YACP,gBAAgB;YAChB,WAAW;YACX,kBAAkB;YAClB,WAAW;SACZ,CAAC,CAAC,MAAM,GAAG,CAAC,EACb,CAAC;YACD,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;gBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACjD,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC,CAC1B,CAAC;QAEF,OAAO,IAAI,CAAA;;;;;kBAKG,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;;;;;;YAM7D,MAAM,CACN,IAAI,CAAC,KAAK,CAAC,IAAI,EACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;4BACN,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAc,CAAC;kBACvD,KAAK;;aAEV,CACF;;;kBAGO,QAAQ,CAAC;YACf;;;eAGG;YACH,eAAe,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;YACxC,iBAAiB,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;YAC5C,WAAW,EAAE,IAAI;SAClB,CAAC;;YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YAC1B,CAAC,CAAC,MAAM,CACJ,IAAI,CAAC,KAAK,CAAC,IAAI,EACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACf,IACE,IAAI,CAAC,SAAS,KAAK,IAAI;oBACvB,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACpC,CAAC;oBACD,OAAO,IAAI,CAAA;;8BAED,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;;oCAEtC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;2BAC9C,KAAK;;4BAEJ,CAAC;gBACX,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;oBAC7C,OAAO,IAAI,CAAA;;;gCAGC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;;sCAEtC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;6BAC9C,KAAK;;;qBAGb,CAAC;gBACJ,CAAC;gBACD,OAAO,IAAI,CAAA;;;8BAGC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;;oCAEtC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;2BAC9C,KAAK;;;mBAGb,CAAC;YACJ,CAAC,CACF;YACH,CAAC,CAAC,IAAI,CAAA;;;0BAGQ,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAc,CAAC;;gCAElC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;uBAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;;eAG1B;;;KAGV,CAAC;IACJ,CAAC;IAED,aAAa;QACX,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7D,IAAI,mBAAmB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC1B,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACxE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YACnC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;YAAE,OAAO;QAErC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,UAAU,GAAG,KAAK,CACtB,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,EACvE,IAAI,CAAC,gBAAgB,CACtB,CAAC;QAEF,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;YACvC,CAAC,CAAC;gBACE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,eAAe,EAAE,mBAAmB,CAAC,EAAE;gBACzD,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,eAAe,EAAE,kBAAkB,CAAC,EAAE;aAC3D,CAAC,IAAI,CAAC,SAAS,CAAC;YACnB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAEnB;;WAEG;QACH,IAAI;QACJ,IACE,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC;YAC3B,eAAe,CAAC,UAAU,CAAC,MAAsC,CAAC,EAClE,CAAC;YACD,MAAM,IAAI,GACR,eAAe,CAAC,UAAU,CAAC,MAAsC,CAAC,CAAC;YACrE,UAAU,CAAC,MAAM,GAAG,UAAU,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;iBACvC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;iBAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,IAAI;QAEJ,IAAI,CAAC;YACH,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;YAE9D,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC7B,QAAQ,EACR,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC/B;gBACE,IAAI,EAAE,IAAI;aACX,CACF,CAAC;YAEF,MAAM;YACN,4CAA4C;YAC5C,8DAA8D;YAC9D,KAAK;YACL,uFAAuF;YACvF,uEAAuE;YACvE,KAAK;YACL,uFAAuF;YACvF,MAAM;YACN,iCAAiC;YACjC,OAAO;YACP,+CAA+C;YAC/C,oCAAoC;YACpC,MAAM;YACN,sCAAsC;YACtC,gCAAgC;YAChC,IAAI;QACN,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,yBAAyB,CAAC,8BAA8B,CAAC,CAC9D,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,yBAAyB,CAAC,4BAA4B,CAAC,CAC5D,CAAC;IACJ,CAAC;;AAhSM,gCAAM,GAAG,CAAC,iBAAiB,CAAC,AAAtB,CAAuB;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAQzB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACkB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4DACqB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEACqB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACc;AAGzC;IADC,KAAK,CAAC,oBAAoB,CAAC;sEACiB;AAG7C;IADC,KAAK,CAAC,YAAY,CAAC;2DACc;AAGlC;IADC,KAAK,EAAE;6DACe;AAtCZ,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAkSrC","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n  intersection,\n  isEmpty,\n  isNullish,\n  isString,\n  merge,\n  omit,\n  range,\n} from 'remeda';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport { PartDataDigit } from '../../types/group.js';\nimport { rollerDigitStyles } from './styles.js';\nimport * as EasingFunctions from '../../easing/index.js';\n\nclass RollerDigitAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller-digit')\nexport class TimeredCounterRollerDigit extends LitElement {\n  static styles = [rollerDigitStyles];\n\n  @property({ type: Object })\n  digit: PartDataDigit = { data: [], place: 0 };\n\n  @property({ type: Object })\n  preprocessData: PartPreprocessedData = {\n    animate: true,\n    cancelPrevAnimation: false,\n    earlyReturn: '',\n    index: 0,\n    partIndex: 0,\n    digitIndex: 0,\n  };\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Object })\n  textStyle: Partial<CSSStyleDeclaration> = {};\n\n  @property({ type: Array })\n  cellStyle: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  animationOptions: KeyframeAnimationOptions = {};\n\n  @property({ type: Object })\n  keyframes: PropertyIndexedKeyframes = {};\n\n  @query('.roll-list__shadow')\n  clonedRollDigitList: HTMLElement | undefined;\n\n  @query('.roll-list')\n  rollList: HTMLElement | undefined;\n\n  @state()\n  digitWidth: number = 0;\n\n  resizeObserver: ResizeObserver;\n\n  animation: Animation | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.digitWidth = (\n        this.clonedRollDigitList\n          ? this.clonedRollDigitList.getBoundingClientRect()\n          : new DOMRect()\n      ).width;\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues<this>) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.clonedRollDigitList) {\n      this.resizeObserver.observe(this.clonedRollDigitList);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.resizeObserver.disconnect();\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    super.updated(_changedProperties);\n\n    /**\n     * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.\n     */\n    if (\n      intersection(Array.from(_changedProperties.keys()), [\n        'digit',\n        'preprocessData',\n        'direction',\n        'animationOptions',\n        'keyframes',\n      ]).length > 0\n    ) {\n      if (this.shouldAnimate()) {\n        this.startAnimation().then();\n      }\n    }\n  }\n\n  render() {\n    const shadowCellStyle = this.cellStyle.map(style =>\n      omit(style, ['position']),\n    );\n\n    return html`\n      <span class=\"roller-part-digit\">\n        <!--    占位      -->\n        <span\n          class=\"placeholder\"\n          style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}\n        >\n          0\n        </span>\n        <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->\n        <span class=\"roll-list__shadow\">\n          ${repeat(\n            this.digit.data,\n            (_, index) => index,\n            (digit, index) => html`\n              <span style=${styleMap(shadowCellStyle[index] as StyleInfo)}>\n                ${digit}\n              </span>\n            `,\n          )}\n        </span>\n        <span\n          class=${classMap({\n            /**\n             * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果\n             * 向下同理\n             */\n            'roll-list__up': this.direction === 'up',\n            'roll-list__down': this.direction === 'down',\n            'roll-list': true,\n          })}\n        >\n          ${this.digit.data.length > 1\n            ? repeat(\n                this.digit.data,\n                (_, index) => index,\n                (digit, index) => {\n                  if (\n                    this.direction === 'up' &&\n                    index === this.digit.data.length - 1\n                  ) {\n                    return html`<span\n                      class=\"roll-item roll-item__head\"\n                      style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                    >\n                      <span style=${styleMap(this.textStyle as StyleInfo)}\n                        >${digit}</span\n                      >\n                    </span>`;\n                  }\n                  if (this.direction === 'down' && index === 0) {\n                    return html`\n                      <span\n                        class=\"roll-item roll-item__tail\"\n                        style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                      >\n                        <span style=${styleMap(this.textStyle as StyleInfo)}\n                          >${digit}</span\n                        >\n                      </span>\n                    `;\n                  }\n                  return html`\n                    <span\n                      class=\"roll-item\"\n                      style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                    >\n                      <span style=${styleMap(this.textStyle as StyleInfo)}\n                        >${digit}</span\n                      >\n                    </span>\n                  `;\n                },\n              )\n            : html`\n                <span\n                  class=\"roll-item\"\n                  style=${styleMap(this.cellStyle[0] as StyleInfo)}\n                >\n                  <span style=${styleMap(this.textStyle as StyleInfo)}\n                    >${this.digit.data[0]}</span\n                  >\n                </span>\n              `}\n        </span>\n      </span>\n    `;\n  }\n\n  shouldAnimate() {\n    const { cancelPrevAnimation, animate } = this.preprocessData;\n    if (cancelPrevAnimation) {\n      if (this.animation) {\n        this.animation.cancel();\n      }\n\n      if (this.rollList && this.rollList.style && this.rollList.style.cssText) {\n        this.rollList.style.cssText = '';\n      }\n    }\n\n    if (!animate) return false;\n\n    return true;\n  }\n\n  async startAnimation() {\n    if (isNullish(this.rollList)) return;\n\n    this.__emitAnimationStart();\n\n    const anmOptions = merge(\n      { duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' },\n      this.animationOptions,\n    );\n\n    const keyframes = isEmpty(this.keyframes)\n      ? {\n          up: { transform: ['translateY(0)', 'translateY(-100%)'] },\n          down: { transform: ['translateY(0)', 'translateY(100%)'] },\n        }[this.direction]\n      : this.keyframes;\n\n    /**\n     * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数\n     */\n    // {\n    if (\n      isString(anmOptions.easing) &&\n      EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions]\n    ) {\n      const func =\n        EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions];\n      anmOptions.easing = `linear(${range(0, 64)\n        .map((_, i) => func(i / 63))\n        .join(',')})`;\n    }\n    // }\n\n    try {\n      this.clearAnimation();\n      this.animation = this.rollList.animate(keyframes, anmOptions);\n\n      this.animation.addEventListener(\n        'finish',\n        () => this.__emitAnimationEnd(),\n        {\n          once: true,\n        },\n      );\n\n      // /**\n      //  * 动画播放完成或被其他动画中断都会使得 `finished` resolve.\n      //  * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].\n      //  *\n      //  * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.\n      //  * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.\n      //  *\n      //  * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions\n      //  */\n      // await this.animation.finished;\n      // if (\n      //   this.animation.playState === 'finished' &&\n      //   this.rollList.checkVisibility()\n      // ) {\n      //   // this.animation.commitStyles();\n      //   // this.animation.cancel();\n      // }\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e);\n    }\n  }\n\n  clearAnimation() {\n    this.animation?.removeEventListener('finish', this.__emitAnimationEnd);\n    this.animation?.cancel();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-start'),\n    );\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-end'),\n    );\n  }\n}\n"]}
+{"version":3,"file":"roller-digit.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller-digit.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EACL,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,GACN,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,eAAe,MAAM,yCAAyC,CAAC;AAE3E,MAAM,yBAA0B,SAAQ,KAAK;CAI5C;AAGM,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IA4CvD;QACE,KAAK,EAAE,CAAC;QAzCV,UAAK,GAAkB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAG9C,mBAAc,GAAyB;YACrC,OAAO,EAAE,IAAI;YACb,mBAAmB,EAAE,KAAK;YAC1B,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,CAAC;YACR,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,CAAC;SACd,CAAC;QAGF,cAAS,GAAkB,IAAI,CAAC;QAGhC,cAAS,GAAiC,EAAE,CAAC;QAG7C,cAAS,GAAmC,EAAE,CAAC;QAG/C,qBAAgB,GAA6B,EAAE,CAAC;QAGhD,cAAS,GAA6B,EAAE,CAAC;QASzC,eAAU,GAAW,CAAC,CAAC;QASrB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,CAChB,IAAI,CAAC,mBAAmB;gBACtB,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;gBAClD,CAAC,CAAC,IAAI,OAAO,EAAE,CAClB,CAAC,KAAK,CAAC;QACV,CAAC,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,kBAAwC;QAC7D,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QAEvC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAElC;;WAEG;QACH,IACE,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC,EAAE;YAClD,OAAO;YACP,gBAAgB;YAChB,WAAW;YACX,kBAAkB;YAClB,WAAW;SACZ,CAAC,CAAC,MAAM,GAAG,CAAC,EACb,CAAC;YACD,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;gBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACjD,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC,CAC1B,CAAC;QAEF,OAAO,IAAI,CAAA;;;;gBAIC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;;;;;UAK7D,MAAM,CACN,IAAI,CAAC,KAAK,CAAC,IAAI,EACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACf,IAAI,CAAA,eAAe,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAc,CAAC;iBAC3D,KAAK;cACR,CACL;;;gBAGO,QAAQ,CAAC;YACf;;;eAGG;YACH,eAAe,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI;YACxC,iBAAiB,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;YAC5C,WAAW,EAAE,IAAI;SAClB,CAAC;;UAEA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YAC1B,CAAC,CAAC,MAAM,CACJ,IAAI,CAAC,KAAK,CAAC,IAAI,EACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACf,IACE,IAAI,CAAC,SAAS,KAAK,IAAI;oBACvB,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACpC,CAAC;oBACD,OAAO,IAAI,CAAA;;;4BAGD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;mCACrC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;yBAC/C,KAAK;;oBAEV,CAAC;gBACL,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;oBAC7C,OAAO,IAAI,CAAA;;;;8BAIC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;qCACrC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;2BAC/C,KAAK;;;mBAGb,CAAC;gBACJ,CAAC;gBACD,OAAO,IAAI,CAAA;;;0BAGD,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAc,CAAC;iCACrC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;uBAC/C,KAAK;;kBAEV,CAAC;YACL,CAAC,CACF;YACH,CAAC,CAAC,IAAI,CAAA;;;sBAGM,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAc,CAAC;6BACjC,QAAQ,CAAC,IAAI,CAAC,SAAsB,CAAC;mBAC/C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;cAEvB;;OAEP,CAAC;IACN,CAAC;IAED,aAAa;QACX,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7D,IAAI,mBAAmB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC1B,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACxE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YACnC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,IAAI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;YAAE,OAAO;QAErC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,UAAU,GAAG,KAAK,CACtB,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,EACvE,IAAI,CAAC,gBAAgB,CACtB,CAAC;QAEF,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;YACvC,CAAC,CAAC;gBACE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,eAAe,EAAE,mBAAmB,CAAC,EAAE;gBACzD,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,eAAe,EAAE,kBAAkB,CAAC,EAAE;aAC3D,CAAC,IAAI,CAAC,SAAS,CAAC;YACnB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAEnB;;WAEG;QACH,IAAI;QACJ,IACE,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC;YAC3B,eAAe,CAAC,UAAU,CAAC,MAAsC,CAAC,EAClE,CAAC;YACD,MAAM,IAAI,GACR,eAAe,CAAC,UAAU,CAAC,MAAsC,CAAC,CAAC;YACrE,UAAU,CAAC,MAAM,GAAG,UAAU,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;iBACvC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;iBAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,IAAI;QAEJ,IAAI,CAAC;YACH,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;YAE9D,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAC7B,QAAQ,EACR,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC/B;gBACE,IAAI,EAAE,IAAI;aACX,CACF,CAAC;YAEF,MAAM;YACN,4CAA4C;YAC5C,8DAA8D;YAC9D,KAAK;YACL,uFAAuF;YACvF,uEAAuE;YACvE,KAAK;YACL,uFAAuF;YACvF,MAAM;YACN,iCAAiC;YACjC,OAAO;YACP,+CAA+C;YAC/C,oCAAoC;YACpC,MAAM;YACN,sCAAsC;YACtC,gCAAgC;YAChC,IAAI;QACN,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,yBAAyB,CAAC,8BAA8B,CAAC,CAC9D,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,yBAAyB,CAAC,4BAA4B,CAAC,CAC5D,CAAC;IACJ,CAAC;;AAxRM,gCAAM,GAAG,CAAC,iBAAiB,CAAC,AAAtB,CAAuB;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAQzB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACkB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4DACqB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEACqB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACc;AAGzC;IADC,KAAK,CAAC,oBAAoB,CAAC;sEACiB;AAG7C;IADC,KAAK,CAAC,YAAY,CAAC;2DACc;AAGlC;IADC,KAAK,EAAE;6DACe;AAtCZ,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CA0RrC","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n  intersection,\n  isEmpty,\n  isNullish,\n  isString,\n  merge,\n  omit,\n  range,\n} from 'remeda';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport { PartDataDigit } from '../../types/group.js';\nimport { rollerDigitStyles } from './styles.js';\nimport * as EasingFunctions from '../../easing/penner-easing-functions.js';\n\nclass RollerDigitAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller-digit')\nexport class TimeredCounterRollerDigit extends LitElement {\n  static styles = [rollerDigitStyles];\n\n  @property({ type: Object })\n  digit: PartDataDigit = { data: [], place: 0 };\n\n  @property({ type: Object })\n  preprocessData: PartPreprocessedData = {\n    animate: true,\n    cancelPrevAnimation: false,\n    earlyReturn: '',\n    index: 0,\n    partIndex: 0,\n    digitIndex: 0,\n  };\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Object })\n  textStyle: Partial<CSSStyleDeclaration> = {};\n\n  @property({ type: Array })\n  cellStyle: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  animationOptions: KeyframeAnimationOptions = {};\n\n  @property({ type: Object })\n  keyframes: PropertyIndexedKeyframes = {};\n\n  @query('.roll-list__shadow')\n  clonedRollDigitList: HTMLElement | undefined;\n\n  @query('.roll-list')\n  rollList: HTMLElement | undefined;\n\n  @state()\n  digitWidth: number = 0;\n\n  resizeObserver: ResizeObserver;\n\n  animation: Animation | undefined;\n\n  constructor() {\n    super();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.digitWidth = (\n        this.clonedRollDigitList\n          ? this.clonedRollDigitList.getBoundingClientRect()\n          : new DOMRect()\n      ).width;\n    });\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues<this>) {\n    super.firstUpdated(_changedProperties);\n\n    if (this.clonedRollDigitList) {\n      this.resizeObserver.observe(this.clonedRollDigitList);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.resizeObserver.disconnect();\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    super.updated(_changedProperties);\n\n    /**\n     * 仅当影响滚动列表 dom 结构的属性发生变化时才会触发动画.\n     */\n    if (\n      intersection(Array.from(_changedProperties.keys()), [\n        'digit',\n        'preprocessData',\n        'direction',\n        'animationOptions',\n        'keyframes',\n      ]).length > 0\n    ) {\n      if (this.shouldAnimate()) {\n        this.startAnimation().then();\n      }\n    }\n  }\n\n  render() {\n    const shadowCellStyle = this.cellStyle.map(style =>\n      omit(style, ['position']),\n    );\n\n    return html`<span class=\"roller-part-digit\">\n      <!--    占位      -->\n      <span\n        class=\"placeholder\"\n        style=${styleMap({ width: `${Math.round(this.digitWidth)}px` })}\n        >0</span\n      >\n      <!--  一个不可见的滚动列表的复制, 用于计算该列表的最大宽度.  -->\n      <span class=\"roll-list__shadow\">\n        ${repeat(\n          this.digit.data,\n          (_, index) => index,\n          (digit, index) =>\n            html`<span style=${styleMap(shadowCellStyle[index] as StyleInfo)}\n              >${digit}</span\n            >`,\n        )}\n      </span>\n      <span\n        class=${classMap({\n          /**\n           * 向上(up)滚动时, 使滚动列表顶部对齐以便于应用 `translationY(-100%)` 实现向上滚动效果\n           * 向下同理\n           */\n          'roll-list__up': this.direction === 'up',\n          'roll-list__down': this.direction === 'down',\n          'roll-list': true,\n        })}\n      >\n        ${this.digit.data.length > 1\n          ? repeat(\n              this.digit.data,\n              (_, index) => index,\n              (digit, index) => {\n                if (\n                  this.direction === 'up' &&\n                  index === this.digit.data.length - 1\n                ) {\n                  return html`<span\n                    part=\"cell\"\n                    class=\"roll-item roll-item__head\"\n                    style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                    ><span style=${styleMap(this.textStyle as StyleInfo)}\n                      >${digit}</span\n                    ></span\n                  >`;\n                }\n                if (this.direction === 'down' && index === 0) {\n                  return html`\n                    <span\n                      part=\"cell\"\n                      class=\"roll-item roll-item__tail\"\n                      style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                      ><span style=${styleMap(this.textStyle as StyleInfo)}\n                        >${digit}</span\n                      ></span\n                    >\n                  `;\n                }\n                return html`<span\n                  part=\"cell\"\n                  class=\"roll-item\"\n                  style=${styleMap(this.cellStyle[index] as StyleInfo)}\n                  ><span style=${styleMap(this.textStyle as StyleInfo)}\n                    >${digit}</span\n                  ></span\n                >`;\n              },\n            )\n          : html`<span\n              part=\"cell\"\n              class=\"roll-item\"\n              style=${styleMap(this.cellStyle[0] as StyleInfo)}\n              ><span style=${styleMap(this.textStyle as StyleInfo)}\n                >${this.digit.data[0]}</span\n              ></span\n            >`}</span\n      ></span\n    > `;\n  }\n\n  shouldAnimate() {\n    const { cancelPrevAnimation, animate } = this.preprocessData;\n    if (cancelPrevAnimation) {\n      if (this.animation) {\n        this.animation.cancel();\n      }\n\n      if (this.rollList && this.rollList.style && this.rollList.style.cssText) {\n        this.rollList.style.cssText = '';\n      }\n    }\n\n    if (!animate) return false;\n\n    return true;\n  }\n\n  async startAnimation() {\n    if (isNullish(this.rollList)) return;\n\n    this.__emitAnimationStart();\n\n    const anmOptions = merge(\n      { duration: 1000, iterations: 1, easing: 'ease-out', fill: 'forwards' },\n      this.animationOptions,\n    );\n\n    const keyframes = isEmpty(this.keyframes)\n      ? {\n          up: { transform: ['translateY(0)', 'translateY(-100%)'] },\n          down: { transform: ['translateY(0)', 'translateY(100%)'] },\n        }[this.direction]\n      : this.keyframes;\n\n    /**\n     * 尝试从 `PennerEasingFunctions` 中获取对应的 easing 函数\n     */\n    // {\n    if (\n      isString(anmOptions.easing) &&\n      EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions]\n    ) {\n      const func =\n        EasingFunctions[anmOptions.easing as keyof typeof EasingFunctions];\n      anmOptions.easing = `linear(${range(0, 64)\n        .map((_, i) => func(i / 63))\n        .join(',')})`;\n    }\n    // }\n\n    try {\n      this.clearAnimation();\n      this.animation = this.rollList.animate(keyframes, anmOptions);\n\n      this.animation.addEventListener(\n        'finish',\n        () => this.__emitAnimationEnd(),\n        {\n          once: true,\n        },\n      );\n\n      // /**\n      //  * 动画播放完成或被其他动画中断都会使得 `finished` resolve.\n      //  * 只有当动画顺利播放完成的情况下, 才能调用 `cancel` 取消动画. 在其他情况下调用, 会抛出异常[1].\n      //  *\n      //  * 因此, 提前检查 `playState` 的值. 当 `playState` 不是 `finished` 时, 说明动画被其他 `Animation` 实例中断.\n      //  * 因为已经有其他 `Animation` 实例的存在, 我们可以直接丢弃这个 `Animation` 实例, 而不用担心无动画可用.\n      //  *\n      //  * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel#exceptions\n      //  */\n      // await this.animation.finished;\n      // if (\n      //   this.animation.playState === 'finished' &&\n      //   this.rollList.checkVisibility()\n      // ) {\n      //   // this.animation.commitStyles();\n      //   // this.animation.cancel();\n      // }\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e);\n    }\n  }\n\n  clearAnimation() {\n    this.animation?.removeEventListener('finish', this.__emitAnimationEnd);\n    this.animation?.cancel();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-start'),\n    );\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(\n      new RollerDigitAnimationEvent('roller-digit-animation-end'),\n    );\n  }\n}\n"]}

package/dist/src/transitions/roller/roller.d.ts

@@ -16,7 +16,7 @@ export declare class TimeredCounterRoller extends LitElement {
     parentContainerRect: DOMRect;
     prefixContainer: HTMLElement | undefined;
     suffixContainer: HTMLElement | undefined;
-    private __mergedDigitStyles;
+    private __partDigitsColorStyles;
     protected render(): import("lit-html").TemplateResult<1>;
     protected willUpdate(_changedProperties: PropertyValues): void;
     /**

package/dist/src/transitions/roller/roller.js

@@ -3,10 +3,9 @@ import { html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { clone, isNumber, values } from 'remeda';
+import { isNumber, values } from 'remeda';
 import './roller-digit.js';
 import { rollerStyles } from './styles.js';
-import { mergePartDigitOption } from '../../utils/extract-group-option.js';
 class RollerAnimationEvent extends Event {
 }
 let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
@@ -22,7 +21,7 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
         this.digitStyles = [];
         this.partStyles = [];
         this.parentContainerRect = {};
-        this.__mergedDigitStyles = [];
+        this.__partDigitsColorStyles = [];
         /**
          * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.
          *
@@ -41,24 +40,31 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
         this.digitAnimatedCount = 0;
     }
     render() {
-        return html ` <span
+        return html `<span
         class="roller__prefix"
         data-part-id="-1"
         data-digit-id="0"
-        style=${styleMap((this.__mergedDigitStyles[-1]?.[0] ?? {}))}
+        style=${styleMap((this.__partDigitsColorStyles?.[-1]?.[0] ?? {}))}
       >
         <slot part="prefix" name="prefix"></slot>
       </span>
       <span class="counter-parts">
-        ${repeat(this.parts, (_, index) => index, (part, partIndex) => html `<span class="roller-part"
+        ${repeat(this.parts, (_, index) => index, (part, partIndex) => html `<span
+              part="part"
+              class="roller-part"
+              style=${styleMap((this.partStyles?.[partIndex] ?? {}))}
               >${repeat(part.digits, (_, index) => `${part.digits.length - index}`, (digitInfo, digitIndex) => html `<timered-counter-roller-digit
+                    exportparts="digit, cell"
+                    part="digit"
                     class="roller-part__wrapper"
+                    style=${styleMap((this.digitStyles?.[partIndex]?.[digitIndex] ??
+            {}))}
                     data-part-id="${partIndex}"
                     data-digit-id="${digitIndex}"
                     .digit=${digitInfo}
                     .preprocessData=${this.partPreprocessDataList[partIndex][digitIndex]}
                     .direction=${this.direction}
-                    .textStyle=${this.__mergedDigitStyles[partIndex][digitIndex]}
+                    .textStyle=${this.__partDigitsColorStyles?.[partIndex]?.[digitIndex] ?? {}}
                     .cellStyle=${this.cellStyles[partIndex][digitIndex]}
                     .animationOptions=${this.animationOptions[partIndex][digitIndex]}
                     .keyframes=${this.keyframes[partIndex][digitIndex]}
@@ -68,7 +74,8 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
                 class="roller-part__suffix"
                 data-part-id="${partIndex}"
                 data-digit-id="-1"
-                style=${styleMap((this.__mergedDigitStyles[partIndex][-1] ?? {}))}
+                style=${styleMap((this.__partDigitsColorStyles?.[partIndex]?.[-1] ??
+            {}))}
                 ><slot
                   part="part-suffix"
                   name=${`part-suffix-${partIndex}`}
@@ -79,7 +86,7 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
         class="roller__suffix"
         data-part-id="-2"
         data-digit-id="0"
-        style=${styleMap((this.__mergedDigitStyles[-2]?.[0] ?? {}))}
+        style=${styleMap((this.__partDigitsColorStyles?.[-2]?.[0] ?? {}))}
         ><slot part="suffix" name="suffix"></slot
       ></span>`;
     }
@@ -95,10 +102,7 @@ let TimeredCounterRoller = class TimeredCounterRoller extends LitElement {
                 this.__emitAnimationStart();
             }
         }
-        /**
-         * 将 color 样式合并到 digitStyles 中.
-         */
-        this.__mergedDigitStyles = mergePartDigitOption(clone(this.digitStyles), this.__generatePartDigitsColorStyles());
+        this.__partDigitsColorStyles = this.__generatePartDigitsColorStyles();
     }
     __handleDigitAnimationEnd() {
         this.digitAnimateEndCount++;

package/dist/src/transitions/roller/roller.js.map

@@ -1 +1 @@
-{"version":3,"file":"roller.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { clone, isNumber, values } from 'remeda';\nimport { PartData } from '../../types/group.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport './roller-digit.js';\nimport { rollerStyles } from './styles.js';\nimport { mergePartDigitOption } from '../../utils/extract-group-option.js';\n\nclass RollerAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller')\nexport class TimeredCounterRoller extends LitElement {\n  static styles = [rollerStyles];\n\n  @property({ type: String })\n  color: string = '';\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Array })\n  parts: PartData[] = [];\n\n  @property({ type: Array })\n  partPreprocessDataList: PartPreprocessedData[][] = [];\n\n  @property({ type: Array })\n  animationOptions: KeyframeAnimationOptions[][] = [];\n\n  @property({ type: Array })\n  keyframes: PropertyIndexedKeyframes[][] = [];\n\n  @property({ type: Array })\n  cellStyles: Partial<CSSStyleDeclaration>[][][] = [];\n\n  @property({ type: Array })\n  digitStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  @property({ type: Array })\n  partStyles: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  parentContainerRect: DOMRect = {} as DOMRect;\n\n  @query('.roller__prefix')\n  prefixContainer: HTMLElement | undefined;\n\n  @query('.roller__suffix')\n  suffixContainer: HTMLElement | undefined;\n\n  private __mergedDigitStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  protected render() {\n    return html` <span\n        class=\"roller__prefix\"\n        data-part-id=\"-1\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__mergedDigitStyles[-1]?.[0] ?? {}) as StyleInfo,\n        )}\n      >\n        <slot part=\"prefix\" name=\"prefix\"></slot>\n      </span>\n      <span class=\"counter-parts\">\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (part, partIndex) =>\n            html`<span class=\"roller-part\"\n              >${repeat(\n                part.digits,\n                (_, index) => `${part.digits.length - index}`,\n                (digitInfo, digitIndex) =>\n                  html`<timered-counter-roller-digit\n                    class=\"roller-part__wrapper\"\n                    data-part-id=\"${partIndex}\"\n                    data-digit-id=\"${digitIndex}\"\n                    .digit=${digitInfo}\n                    .preprocessData=${this.partPreprocessDataList[partIndex][\n                      digitIndex\n                    ]}\n                    .direction=${this.direction}\n                    .textStyle=${this.__mergedDigitStyles[partIndex][\n                      digitIndex\n                    ]}\n                    .cellStyle=${this.cellStyles[partIndex][digitIndex]}\n                    .animationOptions=${this.animationOptions[partIndex][\n                      digitIndex\n                    ]}\n                    .keyframes=${this.keyframes[partIndex][digitIndex]}\n                    @roller-digit-animation-end=${this\n                      .__handleDigitAnimationEnd}\n                  ></timered-counter-roller-digit>`,\n              )}${html`<span\n                class=\"roller-part__suffix\"\n                data-part-id=\"${partIndex}\"\n                data-digit-id=\"-1\"\n                style=${styleMap(\n                  (this.__mergedDigitStyles[partIndex][-1] ?? {}) as StyleInfo,\n                )}\n                ><slot\n                  part=\"part-suffix\"\n                  name=${`part-suffix-${partIndex}`}\n                ></slot\n              ></span>`}</span\n            > `,\n        )}</span\n      ><span\n        class=\"roller__suffix\"\n        data-part-id=\"-2\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__mergedDigitStyles[-2]?.[0] ?? {}) as StyleInfo,\n        )}\n        ><slot part=\"suffix\" name=\"suffix\"></slot\n      ></span>`;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues) {\n    super.willUpdate(_changedProperties);\n\n    if (\n      _changedProperties.has('direction') ||\n      _changedProperties.has('parts')\n    ) {\n      this.digitAnimateEndCount = 0;\n      this.digitAnimatedCount = this.partPreprocessDataList\n        .flat()\n        .filter(({ animate }) => animate).length;\n\n      if (this.digitAnimatedCount > 0) {\n        this.__emitAnimationStart();\n      }\n    }\n\n    /**\n     * 将 color 样式合并到 digitStyles 中.\n     */\n    this.__mergedDigitStyles = mergePartDigitOption(\n      clone(this.digitStyles),\n      this.__generatePartDigitsColorStyles(),\n    );\n  }\n\n  /**\n   * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.\n   *\n   * 在每次更新前重置为 0.\n   *\n   * @see {@link __handleDigitAnimationEnd}\n   * @private\n   */\n  private digitAnimateEndCount = 0;\n\n  /**\n   * 记录一次更新中, 需要启动动画的 <timered-counter-roller-digit> 元素总数.\n   *\n   * 在每次更新前重新计算.\n   * @private\n   */\n  private digitAnimatedCount = 0;\n\n  private __handleDigitAnimationEnd() {\n    this.digitAnimateEndCount++;\n\n    if (this.digitAnimateEndCount < this.digitAnimatedCount) return;\n\n    this.__emitAnimationEnd();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-start'));\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-end'));\n  }\n\n  private __generatePartDigitsColorStyles() {\n    const result: Partial<CSSStyleDeclaration>[][] = [];\n\n    const containerRect = this.parentContainerRect;\n    const {\n      // parts,\n      // oldParts,\n      prefixContainer,\n      suffixContainer,\n      color,\n    } = this;\n    const partDigitElements = Array.from(\n      this.shadowRoot?.querySelectorAll('[data-part-id]').values() ?? [],\n    ) as HTMLElement[];\n\n    /**\n     * 当某次更新**将**会导致 DOM 宽高发生变化时(如: 滚动数字的位数增加/减少会导致宽度变化),\n     * 需要跳过这次更新然后等待 DOM 宽高变化完成才能更新(宽高变化后将通过 {@link containerRect} 触发).\n     */\n    if (!containerRect) {\n      return result;\n    }\n    /**\n     * 比较 {@link data} 前后不同判断是否导致 DOM 宽度会发生变化.\n     */\n    // if (parts.length !== oldParts.length) {\n    //   this.requestUpdate();\n    //   return result;\n    // }\n    // for (let i = 0; i < parts.length; i++) {\n    //   if (parts[i].digits.length !== oldParts[i].digits.length) {\n    //     this.requestUpdate();\n    //     return result;\n    //   }\n    // }\n\n    if (prefixContainer) partDigitElements[-1] = prefixContainer;\n    if (suffixContainer) partDigitElements[-2] = suffixContainer;\n\n    for (const el of values(partDigitElements)) {\n      const partId = Number.parseInt(el.dataset.partId ?? '-1', 10);\n      const digitId = Number.parseInt(el.dataset.digitId ?? '-1', 10);\n      if (!isNumber(partId) || !isNumber(digitId)) {\n        throw new Error(\n          'The data-part-id and data-digit-id attributes are required.',\n        );\n      }\n\n      if (!result[partId]) result[partId] = [];\n\n      if (CSS.supports('color', color)) {\n        result[partId][digitId] = { color };\n      } else if (CSS.supports('background-image', color)) {\n        result[partId][digitId] = {\n          backgroundImage: color,\n          backgroundClip: 'text',\n          backgroundSize: `${containerRect.width}px ${containerRect.height}px`,\n          backgroundPositionX: `${-el.offsetLeft}px`,\n          backgroundPositionY: `${-el.offsetTop}px`,\n          backgroundRepeat: 'no-repeat',\n          color: 'transparent',\n          // @ts-ignore\n          '-webkit-text-fill-color': 'transparent',\n        };\n      } else {\n        result[partId][digitId] = {};\n        // todo error event\n        // eslint-disable-next-line no-console\n        console.warn(new Error('The color property is not supported.'));\n      }\n    }\n\n    return result;\n  }\n}\n"]}
+{"version":3,"file":"roller.js","sourceRoot":"","sources":["../../../../src/transitions/roller/roller.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { isNumber, values } from 'remeda';\nimport { PartData } from '../../types/group.js';\nimport { PartPreprocessedData } from '../../utils/preprocess-part-data.js';\nimport './roller-digit.js';\nimport { rollerStyles } from './styles.js';\n\nclass RollerAnimationEvent extends Event {\n  // constructor(type: string, eventInitDict?: EventInit) {\n  //   super(type, eventInitDict);\n  // }\n}\n\n@customElement('timered-counter-roller')\nexport class TimeredCounterRoller extends LitElement {\n  static styles = [rollerStyles];\n\n  @property({ type: String })\n  color: string = '';\n\n  @property({ type: String })\n  direction: 'up' | 'down' = 'up';\n\n  @property({ type: Array })\n  parts: PartData[] = [];\n\n  @property({ type: Array })\n  partPreprocessDataList: PartPreprocessedData[][] = [];\n\n  @property({ type: Array })\n  animationOptions: KeyframeAnimationOptions[][] = [];\n\n  @property({ type: Array })\n  keyframes: PropertyIndexedKeyframes[][] = [];\n\n  @property({ type: Array })\n  cellStyles: Partial<CSSStyleDeclaration>[][][] = [];\n\n  @property({ type: Array })\n  digitStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  @property({ type: Array })\n  partStyles: Partial<CSSStyleDeclaration>[] = [];\n\n  @property({ type: Object })\n  parentContainerRect: DOMRect = {} as DOMRect;\n\n  @query('.roller__prefix')\n  prefixContainer: HTMLElement | undefined;\n\n  @query('.roller__suffix')\n  suffixContainer: HTMLElement | undefined;\n\n  private __partDigitsColorStyles: Partial<CSSStyleDeclaration>[][] = [];\n\n  protected render() {\n    return html`<span\n        class=\"roller__prefix\"\n        data-part-id=\"-1\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__partDigitsColorStyles?.[-1]?.[0] ?? {}) as StyleInfo,\n        )}\n      >\n        <slot part=\"prefix\" name=\"prefix\"></slot>\n      </span>\n      <span class=\"counter-parts\">\n        ${repeat(\n          this.parts,\n          (_, index) => index,\n          (part, partIndex) =>\n            html`<span\n              part=\"part\"\n              class=\"roller-part\"\n              style=${styleMap(\n                (this.partStyles?.[partIndex] ?? {}) as StyleInfo,\n              )}\n              >${repeat(\n                part.digits,\n                (_, index) => `${part.digits.length - index}`,\n                (digitInfo, digitIndex) =>\n                  html`<timered-counter-roller-digit\n                    exportparts=\"digit, cell\"\n                    part=\"digit\"\n                    class=\"roller-part__wrapper\"\n                    style=${styleMap(\n                      (this.digitStyles?.[partIndex]?.[digitIndex] ??\n                        {}) as StyleInfo,\n                    )}\n                    data-part-id=\"${partIndex}\"\n                    data-digit-id=\"${digitIndex}\"\n                    .digit=${digitInfo}\n                    .preprocessData=${this.partPreprocessDataList[partIndex][\n                      digitIndex\n                    ]}\n                    .direction=${this.direction}\n                    .textStyle=${this.__partDigitsColorStyles?.[partIndex]?.[\n                      digitIndex\n                    ] ?? {}}\n                    .cellStyle=${this.cellStyles[partIndex][digitIndex]}\n                    .animationOptions=${this.animationOptions[partIndex][\n                      digitIndex\n                    ]}\n                    .keyframes=${this.keyframes[partIndex][digitIndex]}\n                    @roller-digit-animation-end=${this\n                      .__handleDigitAnimationEnd}\n                  ></timered-counter-roller-digit>`,\n              )}${html`<span\n                class=\"roller-part__suffix\"\n                data-part-id=\"${partIndex}\"\n                data-digit-id=\"-1\"\n                style=${styleMap(\n                  (this.__partDigitsColorStyles?.[partIndex]?.[-1] ??\n                    {}) as StyleInfo,\n                )}\n                ><slot\n                  part=\"part-suffix\"\n                  name=${`part-suffix-${partIndex}`}\n                ></slot\n              ></span>`}</span\n            > `,\n        )}</span\n      ><span\n        class=\"roller__suffix\"\n        data-part-id=\"-2\"\n        data-digit-id=\"0\"\n        style=${styleMap(\n          (this.__partDigitsColorStyles?.[-2]?.[0] ?? {}) as StyleInfo,\n        )}\n        ><slot part=\"suffix\" name=\"suffix\"></slot\n      ></span>`;\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues) {\n    super.willUpdate(_changedProperties);\n\n    if (\n      _changedProperties.has('direction') ||\n      _changedProperties.has('parts')\n    ) {\n      this.digitAnimateEndCount = 0;\n      this.digitAnimatedCount = this.partPreprocessDataList\n        .flat()\n        .filter(({ animate }) => animate).length;\n\n      if (this.digitAnimatedCount > 0) {\n        this.__emitAnimationStart();\n      }\n    }\n\n    this.__partDigitsColorStyles = this.__generatePartDigitsColorStyles();\n  }\n\n  /**\n   * 记录一次更新中, 启动动画并结束的 <timered-counter-roller-digit> 元素个数.\n   *\n   * 在每次更新前重置为 0.\n   *\n   * @see {@link __handleDigitAnimationEnd}\n   * @private\n   */\n  private digitAnimateEndCount = 0;\n\n  /**\n   * 记录一次更新中, 需要启动动画的 <timered-counter-roller-digit> 元素总数.\n   *\n   * 在每次更新前重新计算.\n   * @private\n   */\n  private digitAnimatedCount = 0;\n\n  private __handleDigitAnimationEnd() {\n    this.digitAnimateEndCount++;\n\n    if (this.digitAnimateEndCount < this.digitAnimatedCount) return;\n\n    this.__emitAnimationEnd();\n  }\n\n  private __emitAnimationStart() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-start'));\n  }\n\n  private __emitAnimationEnd() {\n    if (!this.isConnected) return;\n\n    this.dispatchEvent(new RollerAnimationEvent('roller-animation-end'));\n  }\n\n  private __generatePartDigitsColorStyles() {\n    const result: Partial<CSSStyleDeclaration>[][] = [];\n\n    const containerRect = this.parentContainerRect;\n    const {\n      // parts,\n      // oldParts,\n      prefixContainer,\n      suffixContainer,\n      color,\n    } = this;\n    const partDigitElements = Array.from(\n      this.shadowRoot?.querySelectorAll('[data-part-id]').values() ?? [],\n    ) as HTMLElement[];\n\n    /**\n     * 当某次更新**将**会导致 DOM 宽高发生变化时(如: 滚动数字的位数增加/减少会导致宽度变化),\n     * 需要跳过这次更新然后等待 DOM 宽高变化完成才能更新(宽高变化后将通过 {@link containerRect} 触发).\n     */\n    if (!containerRect) {\n      return result;\n    }\n    /**\n     * 比较 {@link data} 前后不同判断是否导致 DOM 宽度会发生变化.\n     */\n    // if (parts.length !== oldParts.length) {\n    //   this.requestUpdate();\n    //   return result;\n    // }\n    // for (let i = 0; i < parts.length; i++) {\n    //   if (parts[i].digits.length !== oldParts[i].digits.length) {\n    //     this.requestUpdate();\n    //     return result;\n    //   }\n    // }\n\n    if (prefixContainer) partDigitElements[-1] = prefixContainer;\n    if (suffixContainer) partDigitElements[-2] = suffixContainer;\n\n    for (const el of values(partDigitElements)) {\n      const partId = Number.parseInt(el.dataset.partId ?? '-1', 10);\n      const digitId = Number.parseInt(el.dataset.digitId ?? '-1', 10);\n      if (!isNumber(partId) || !isNumber(digitId)) {\n        throw new Error(\n          'The data-part-id and data-digit-id attributes are required.',\n        );\n      }\n\n      if (!result[partId]) result[partId] = [];\n\n      if (CSS.supports('color', color)) {\n        result[partId][digitId] = { color };\n      } else if (CSS.supports('background-image', color)) {\n        result[partId][digitId] = {\n          backgroundImage: color,\n          backgroundClip: 'text',\n          backgroundSize: `${containerRect.width}px ${containerRect.height}px`,\n          backgroundPositionX: `${-el.offsetLeft}px`,\n          backgroundPositionY: `${-el.offsetTop}px`,\n          backgroundRepeat: 'no-repeat',\n          color: 'transparent',\n          // @ts-ignore\n          '-webkit-text-fill-color': 'transparent',\n        };\n      } else {\n        result[partId][digitId] = {};\n        // todo error event\n        // eslint-disable-next-line no-console\n        console.warn(new Error('The color property is not supported.'));\n      }\n    }\n\n    return result;\n  }\n}\n"]}

package/dist/src/transitions/roller/styles.js

@@ -1,11 +1,24 @@
 import { css } from 'lit';
 export const rollerStyles = css `
+  :host {
+    display: inline-flex;
+    overflow: hidden;
+
+    /**
+        inline-block 和 overflow-hidden 同时存在会使得基线为下边缘. 手动设置 align-bottom 以修正这个问题.
+        @see https://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container
+        @see https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
+    */
+    vertical-align: bottom;
+  }
+
   .counter-parts {
     display: inline-flex;
     flex: 1 1 auto;
   }
 
   .roller-part {
+    display: inline-flex;
     white-space: nowrap;
   }
 
@@ -53,6 +66,8 @@ export const rollerDigitStyles = css `
   .roll-list__shadow {
     visibility: hidden;
     position: absolute;
+    left: 0;
+    top: 0;
     z-index: -10;
     display: inline-flex;
     flex-direction: column;

package/dist/src/transitions/roller/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/transitions/roller/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsB9B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const rollerStyles = css`\n  .counter-parts {\n    display: inline-flex;\n    flex: 1 1 auto;\n  }\n\n  .roller-part {\n    white-space: nowrap;\n  }\n\n  .roller__prefix,\n  .roller__suffix {\n    flex: none;\n  }\n\n  .roller-part .roller-part__wrapper {\n    display: inline-block;\n  }\n\n  .roller-part .roller-part__suffix {\n    display: inline-block;\n  }\n`;\n\nexport const rollerDigitStyles = css`\n  .roller-part-digit {\n    position: relative;\n    display: inline-block;\n  }\n\n  .placeholder {\n    visibility: hidden;\n    display: inline-block;\n  }\n\n  .roll-list {\n    position: absolute;\n    left: 0;\n    display: inline-flex;\n    width: 100%;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .roll-list.roll-list__up {\n    top: 0;\n  }\n\n  .roll-list.roll-list__down {\n    bottom: 0;\n  }\n\n  .roll-list__shadow {\n    visibility: hidden;\n    position: absolute;\n    z-index: -10;\n    display: inline-flex;\n    flex-direction: column;\n    white-space: nowrap;\n  }\n\n  .roll-item {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .roll-item.roll-item__head {\n    position: absolute;\n    top: 100%;\n  }\n\n  .roll-item.roll-item__tail {\n    position: absolute;\n    bottom: 100%;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/transitions/roller/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC9B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const rollerStyles = css`\n  :host {\n    display: inline-flex;\n    overflow: hidden;\n\n    /**\n        inline-block 和 overflow-hidden 同时存在会使得基线为下边缘. 手动设置 align-bottom 以修正这个问题.\n        @see https://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container\n        @see https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align\n    */\n    vertical-align: bottom;\n  }\n\n  .counter-parts {\n    display: inline-flex;\n    flex: 1 1 auto;\n  }\n\n  .roller-part {\n    display: inline-flex;\n    white-space: nowrap;\n  }\n\n  .roller__prefix,\n  .roller__suffix {\n    flex: none;\n  }\n\n  .roller-part .roller-part__wrapper {\n    display: inline-block;\n  }\n\n  .roller-part .roller-part__suffix {\n    display: inline-block;\n  }\n`;\n\nexport const rollerDigitStyles = css`\n  .roller-part-digit {\n    position: relative;\n    display: inline-block;\n  }\n\n  .placeholder {\n    visibility: hidden;\n    display: inline-block;\n  }\n\n  .roll-list {\n    position: absolute;\n    left: 0;\n    display: inline-flex;\n    width: 100%;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .roll-list.roll-list__up {\n    top: 0;\n  }\n\n  .roll-list.roll-list__down {\n    bottom: 0;\n  }\n\n  .roll-list__shadow {\n    visibility: hidden;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: -10;\n    display: inline-flex;\n    flex-direction: column;\n    white-space: nowrap;\n  }\n\n  .roll-item {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .roll-item.roll-item__head {\n    position: absolute;\n    top: 100%;\n  }\n\n  .roll-item.roll-item__tail {\n    position: absolute;\n    bottom: 100%;\n  }\n`;\n"]}

package/dist/src/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './duration.js';
+export * from './group.js';

package/dist/src/types/index.js

@@ -0,0 +1,3 @@
+export * from './duration.js';
+export * from './group.js';
+//# sourceMappingURL=index.js.map

package/dist/src/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC","sourcesContent":["export * from './duration.js';\nexport * from './group.js';\n"]}