timered-counter 0.0.0

package/dist/stories/timered-counter/index.stories.js

@@ -0,0 +1,180 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter } from '../../src/index.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { valueChange } from '../story-parts/value-change.js';
+import { edgeCase } from '../story-parts/edge-case.js';
+import { animationEvents } from '../story-parts/animation-events.js';
+import { animationOptions } from '../story-parts/animation-options.js';
+import { styles } from '../story-parts/styles.js';
+import { slots, render as slotsRender } from '../story-parts/slots.js';
+setCustomElementsManifest(customElementsManifest);
+const meta = {
+    title: 'TimeredCounter',
+    component: 'timered-counter',
+    tags: ['autodocs', 'timered-counter'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('number');
+    },
+    globals: {
+        setByAttr,
+        setByProp,
+    },
+};
+export default meta;
+export const Basic = {
+    args: {
+        className: 'test-target',
+        // @ts-ignore
+        value: '0',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await valueChange(context, {
+                counter,
+                setBy: setByAttr,
+            });
+            await step('Edge case', async () => edgeCase(context, {
+                counter,
+                list: [
+                    ['Setting an empty string', '', '0'],
+                    ['Setting a non-number', 'a', '0'],
+                    ['Setting a decimal number', '1.1', '1.1'],
+                    ['Setting a negative number', '-1', '-1'],
+                    ['Setting Infinity', 'Infinity', '0'],
+                    ['Setting NaN', 'NaN', '0'],
+                    ['Setting null', 'null', '0'],
+                    ['Setting undefined', 'undefined', '0'],
+                    ['Setting true', 'true', '0'],
+                    ['Setting false', 'false', '0'],
+                    ['Setting an object', '{}', '0'],
+                    ['Setting an array', '[]', '0'],
+                    ['Setting a function', '() => {}', '0'],
+                    ['Setting a Symbol', 'Symbol()', '0'],
+                    ['Setting a BigInt', 'BigInt(1)', '0'],
+                ],
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await valueChange(context, { counter, setBy: setByProp });
+            await step('Edge case', async () => edgeCase(context, {
+                counter,
+                list: [
+                    ['Setting an empty string', '', 0],
+                    ['Setting a non-number', 'a', 0],
+                    ['Setting a decimal number', '1.1', 1.1],
+                    ['Setting a negative number', '-1', -1],
+                    ['Setting Infinity', 'Infinity', 0],
+                    ['Setting NaN', 'NaN', 0],
+                    ['Setting null', 'null', 0],
+                    ['Setting undefined', 'undefined', 0],
+                    ['Setting true', 'true', 0],
+                    ['Setting false', 'false', 0],
+                    ['Setting an object', '{}', 0],
+                    ['Setting an array', '[]', 0],
+                    ['Setting a function', '() => {}', 0],
+                    ['Setting a Symbol', 'Symbol()', 0],
+                    ['Setting a BigInt', 'BigInt(1)', 0],
+                ],
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Animation events', async () => animationEvents(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await step('Animation events', async () => animationEvents(context, {
+                counter,
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const AnimationOptions = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Animation options', async () => animationOptions(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        // await step('Testing with property', async () => {
+        //   await step('Animation options', async () =>
+        //     animationOptions(context, {
+        //       counter,
+        //       list,
+        //       setBy: setByProp,
+        //     }),
+        //   );
+        // });
+    },
+};
+export const Styles = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Styles', async () => styles(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await step('Styles', async () => styles(context, {
+                counter,
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const Slots = {
+    args: {
+        className: 'test-target',
+        value: 0,
+    },
+    render: slotsRender,
+    async play(context) {
+        const { canvasElement } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await slots(context, { counter });
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/timered-counter/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport { setNumberAdapter, TimeredCounter } from '../../src/index.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { valueChange } from '../story-parts/value-change.js';\nimport { edgeCase } from '../story-parts/edge-case.js';\nimport { animationEvents } from '../story-parts/animation-events.js';\nimport { animationOptions } from '../story-parts/animation-options.js';\nimport { styles } from '../story-parts/styles.js';\nimport { slots, render as slotsRender } from '../story-parts/slots.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nconst meta: Meta = {\n  title: 'TimeredCounter',\n  component: 'timered-counter',\n  tags: ['autodocs', 'timered-counter'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('number');\n  },\n  globals: {\n    setByAttr,\n    setByProp,\n  },\n};\nexport default meta;\n\nexport const Basic: StoryObj<TimeredCounter> = {\n  args: {\n    className: 'test-target',\n    // @ts-ignore\n    value: '0',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await valueChange(context, {\n        counter,\n        setBy: setByAttr,\n      });\n\n      await step('Edge case', async () =>\n        edgeCase(context, {\n          counter,\n          list: [\n            ['Setting an empty string', '', '0'],\n            ['Setting a non-number', 'a', '0'],\n            ['Setting a decimal number', '1.1', '1.1'],\n            ['Setting a negative number', '-1', '-1'],\n            ['Setting Infinity', 'Infinity', '0'],\n            ['Setting NaN', 'NaN', '0'],\n            ['Setting null', 'null', '0'],\n            ['Setting undefined', 'undefined', '0'],\n            ['Setting true', 'true', '0'],\n            ['Setting false', 'false', '0'],\n            ['Setting an object', '{}', '0'],\n            ['Setting an array', '[]', '0'],\n            ['Setting a function', '() => {}', '0'],\n            ['Setting a Symbol', 'Symbol()', '0'],\n            ['Setting a BigInt', 'BigInt(1)', '0'],\n          ],\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await valueChange(context, { counter, setBy: setByProp });\n\n      await step('Edge case', async () =>\n        edgeCase(context, {\n          counter,\n          list: [\n            ['Setting an empty string', '', 0],\n            ['Setting a non-number', 'a', 0],\n            ['Setting a decimal number', '1.1', 1.1],\n            ['Setting a negative number', '-1', -1],\n            ['Setting Infinity', 'Infinity', 0],\n            ['Setting NaN', 'NaN', 0],\n            ['Setting null', 'null', 0],\n            ['Setting undefined', 'undefined', 0],\n            ['Setting true', 'true', 0],\n            ['Setting false', 'false', 0],\n            ['Setting an object', '{}', 0],\n            ['Setting an array', '[]', 0],\n            ['Setting a function', '() => {}', 0],\n            ['Setting a Symbol', 'Symbol()', 0],\n            ['Setting a BigInt', 'BigInt(1)', 0],\n          ],\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const Events: StoryObj<TimeredCounter> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Animation events', async () =>\n        animationEvents(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await step('Animation events', async () =>\n        animationEvents(context, {\n          counter,\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const AnimationOptions: StoryObj<TimeredCounter> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Animation options', async () =>\n        animationOptions(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    // await step('Testing with property', async () => {\n    //   await step('Animation options', async () =>\n    //     animationOptions(context, {\n    //       counter,\n    //       list,\n    //       setBy: setByProp,\n    //     }),\n    //   );\n    // });\n  },\n};\n\nexport const Styles: StoryObj<TimeredCounter> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Styles', async () =>\n        styles(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await step('Styles', async () =>\n        styles(context, {\n          counter,\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const Slots: StoryObj<TimeredCounter> = {\n  args: {\n    className: 'test-target',\n    value: 0,\n  },\n  render: slotsRender,\n  async play(context) {\n    const { canvasElement } = context;\n\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await slots(context, { counter });\n  },\n};\n"]}

package/dist/stories/timered-counter-datetime-duration/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { TimeredCounterDatetimeDuration } from '../../src/index.js';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: StoryObj<TimeredCounterDatetimeDuration>;
+export declare const Precision: StoryObj<TimeredCounterDatetimeDuration>;
+export declare const Locale: StoryObj<TimeredCounterDatetimeDuration>;

package/dist/stories/timered-counter-datetime-duration/index.stories.js

@@ -0,0 +1,95 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import { isArray, isDate, range } from 'remeda';
+import { addDays, addHours, addMinutes, addMonths, addSeconds, addYears, differenceInMilliseconds, } from 'date-fns';
+import { expect } from '@storybook/test';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, } from '../../src/index.js';
+import { valueChange } from '../story-parts/value-change.js';
+import { datetimePrecision } from '../story-parts/datetime-precision.js';
+import { datetimeLocale } from '../story-parts/datetime-locale.js';
+setCustomElementsManifest(customElementsManifest);
+function setByAttr(element, attr, value) {
+    if (isArray(value)) {
+        if (isDate(value[0]) && isDate(value[1])) {
+            element.setAttribute(attr, JSON.stringify(value.map(date => date.getTime())));
+        }
+    }
+    else {
+        element.setAttribute(attr, value);
+    }
+}
+function setByProp(element, prop, value) {
+    // @ts-ignore
+    element[prop] = value;
+}
+function equal(counter, a, b) {
+    const na = counter.numberAdapter;
+    return expect(na.toString(a)).toBe(na.toString(na.create(differenceInMilliseconds(b[1], b[0]))));
+}
+const meta = {
+    title: 'TimeredCounterDatetimeDuration',
+    component: 'timered-counter-datetime-duration',
+    tags: ['autodocs', 'timered-counter-datetime-duration'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('number');
+    },
+};
+export default meta;
+export const Basic = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = [
+            ...range(0, 2).map(v => [new Date(), addSeconds(new Date(), v)]),
+            ...range(0, 2).map(v => [new Date(), addMinutes(new Date(), v)]),
+            ...range(0, 2).map(v => [new Date(), addHours(new Date(), v)]),
+            ...range(0, 2).map(v => [new Date(), addDays(new Date(), v)]),
+            ...range(0, 2).map(v => [new Date(), addMonths(new Date(), v)]),
+            ...range(0, 2).map(v => [new Date(), addYears(new Date(), v)]),
+        ];
+        await step('Testing with attribute', async () => {
+            await valueChange(context, { counter, list, setBy: setByAttr, equal });
+        });
+        await step('Testing with property', async () => {
+            await valueChange(context, { counter, list, setBy: setByProp, equal });
+        });
+    },
+};
+export const Precision = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => datetimePrecision(context, { counter, setBy: setByAttr, equal }));
+        await step('Testing with property', async () => datetimePrecision(context, { counter, setBy: setByProp, equal }));
+    },
+};
+export const Locale = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', () => datetimeLocale(context, { counter, setBy: setByAttr, equal }));
+        await step('Testing with property', () => datetimeLocale(context, { counter, setBy: setByProp, equal }));
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/timered-counter-datetime-duration/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-datetime-duration/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport { isArray, isDate, range } from 'remeda';\nimport {\n  addDays,\n  addHours,\n  addMinutes,\n  addMonths,\n  addSeconds,\n  addYears,\n  differenceInMilliseconds,\n} from 'date-fns';\nimport { expect } from '@storybook/test';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  type TimeredCounter,\n  TimeredCounterDatetimeDuration,\n} from '../../src/index.js';\nimport { valueChange } from '../story-parts/value-change.js';\nimport { datetimePrecision } from '../story-parts/datetime-precision.js';\nimport { datetimeLocale } from '../story-parts/datetime-locale.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nfunction setByAttr(\n  element: TimeredCounter,\n  attr: string,\n  value: Date[] | string,\n) {\n  if (isArray(value)) {\n    if (isDate(value[0]) && isDate(value[1])) {\n      element.setAttribute(\n        attr,\n        JSON.stringify((value as Date[]).map(date => date.getTime())),\n      );\n    }\n  } else {\n    element.setAttribute(attr, value);\n  }\n}\n\nfunction setByProp(element: TimeredCounter, prop: string, value: any) {\n  // @ts-ignore\n  element[prop] = value;\n}\n\nfunction equal(counter: TimeredCounter, a: any, b: Date[]) {\n  const na = counter.numberAdapter;\n  return expect(na.toString(a)).toBe(\n    na.toString(na.create(differenceInMilliseconds(b[1], b[0]))),\n  );\n}\n\nconst meta: Meta = {\n  title: 'TimeredCounterDatetimeDuration',\n  component: 'timered-counter-datetime-duration',\n  tags: ['autodocs', 'timered-counter-datetime-duration'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('number');\n  },\n};\nexport default meta;\n\nexport const Basic: StoryObj<TimeredCounterDatetimeDuration> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounterDatetimeDuration;\n\n    const list = [\n      ...range(0, 2).map(v => [new Date(), addSeconds(new Date(), v)]),\n      ...range(0, 2).map(v => [new Date(), addMinutes(new Date(), v)]),\n      ...range(0, 2).map(v => [new Date(), addHours(new Date(), v)]),\n      ...range(0, 2).map(v => [new Date(), addDays(new Date(), v)]),\n      ...range(0, 2).map(v => [new Date(), addMonths(new Date(), v)]),\n      ...range(0, 2).map(v => [new Date(), addYears(new Date(), v)]),\n    ];\n\n    await step('Testing with attribute', async () => {\n      await valueChange(context, { counter, list, setBy: setByAttr, equal });\n    });\n\n    await step('Testing with property', async () => {\n      await valueChange(context, { counter, list, setBy: setByProp, equal });\n    });\n  },\n};\n\nexport const Precision: StoryObj<TimeredCounterDatetimeDuration> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounterDatetimeDuration;\n\n    await step('Testing with attribute', async () =>\n      datetimePrecision(context, { counter, setBy: setByAttr, equal }),\n    );\n    await step('Testing with property', async () =>\n      datetimePrecision(context, { counter, setBy: setByProp, equal }),\n    );\n  },\n};\n\nexport const Locale: StoryObj<TimeredCounterDatetimeDuration> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounterDatetimeDuration;\n\n    await step('Testing with attribute', () =>\n      datetimeLocale(context, { counter, setBy: setByAttr, equal }),\n    );\n    await step('Testing with property', () =>\n      datetimeLocale(context, { counter, setBy: setByProp, equal }),\n    );\n  },\n};\n"]}

package/dist/stories/timered-counter-number/decimaljs.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { TimeredCounterNumber } from '../../src/index.js';
+export { Basic, Events, Styles, LocaleNumber, AnimationOptions, } from './index.stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const BigNumber: StoryObj<TimeredCounterNumber>;

package/dist/stories/timered-counter-number/decimaljs.stories.js

@@ -0,0 +1,34 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, } from '../../src/index.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { bigNumber } from '../story-parts/big-number.js';
+export { Basic, Events, Styles, LocaleNumber, AnimationOptions, } from './index.stories.js';
+setCustomElementsManifest(customElementsManifest);
+const meta = {
+    title: 'TimeredCounterNumber/with decimal.js',
+    component: 'timered-counter-number',
+    tags: ['autodocs', 'timered-counter-number'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('decimal.js');
+    },
+};
+export default meta;
+export const BigNumber = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => bigNumber(context, { counter, setBy: setByAttr }));
+        await step('Testing with property', async () => bigNumber(context, { counter, setBy: setByProp }));
+    },
+};
+//# sourceMappingURL=decimaljs.stories.js.map

package/dist/stories/timered-counter-number/decimaljs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decimaljs.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-number/decimaljs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,GAE1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,MAAM,4BAA4B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACtF,OAAO,EACL,gBAAgB,GAGjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAE5B,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;AAElD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,wBAAwB;IACnC,IAAI,EAAE,CAAC,UAAU,EAAE,wBAAwB,CAAC;IAC5C,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;IACD,UAAU,EAAE,GAAG,EAAE;QACf,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAmC;IACvD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE;YAChB,QAAQ,EAAE,GAAG;SACd;KACF;IACD,KAAK,CAAC,IAAI,CAAC,OAAO;QAChB,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;QACxC,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CACzC,cAAc,CACG,CAAC;QAEpB,MAAM,IAAI,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE,CAC9C,SAAS,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAClD,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE,CAC7C,SAAS,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAClD,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  type TimeredCounter,\n  TimeredCounterNumber,\n} from '../../src/index.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { bigNumber } from '../story-parts/big-number.js';\n\nexport {\n  Basic,\n  Events,\n  Styles,\n  LocaleNumber,\n  AnimationOptions,\n} from './index.stories.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nconst meta: Meta = {\n  title: 'TimeredCounterNumber/with decimal.js',\n  component: 'timered-counter-number',\n  tags: ['autodocs', 'timered-counter-number'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('decimal.js');\n  },\n};\nexport default meta;\n\nexport const BigNumber: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () =>\n      bigNumber(context, { counter, setBy: setByAttr }),\n    );\n\n    await step('Testing with property', async () =>\n      bigNumber(context, { counter, setBy: setByProp }),\n    );\n  },\n};\n"]}

package/dist/stories/timered-counter-number/index.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { TimeredCounterNumber } from '../../src/index.js';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: StoryObj<TimeredCounterNumber>;
+export declare const Events: StoryObj<TimeredCounterNumber>;
+export declare const AnimationOptions: StoryObj<TimeredCounterNumber>;
+export declare const Styles: StoryObj<TimeredCounterNumber>;
+export declare const LocaleNumber: StoryObj<TimeredCounterNumber>;

package/dist/stories/timered-counter-number/index.stories.js

@@ -0,0 +1,188 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, } from '../../src/index.js';
+import { valueChange } from '../story-parts/value-change.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { edgeCase } from '../story-parts/edge-case.js';
+import { animationEvents } from '../story-parts/animation-events.js';
+import { animationOptions } from '../story-parts/animation-options.js';
+import { styles } from '../story-parts/styles.js';
+import { localeNumber } from '../story-parts/locale-number.js';
+setCustomElementsManifest(customElementsManifest);
+const meta = {
+    title: 'TimeredCounterNumber',
+    component: 'timered-counter-number',
+    tags: ['autodocs', 'timered-counter-number'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('number');
+    },
+};
+export default meta;
+export const Basic = {
+    args: {
+        className: 'test-target',
+        // @ts-ignore
+        value: '0',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await valueChange(context, {
+                counter,
+                setBy: setByAttr,
+            });
+            await step('Edge case', async () => edgeCase(context, {
+                counter,
+                list: [
+                    ['Setting an empty string', '', '0'],
+                    ['Setting a non-number', 'a', '0'],
+                    ['Setting a decimal number', '1.1', '1.1'],
+                    ['Setting a negative number', '-1', '-1'],
+                    ['Setting Infinity', 'Infinity', '0'],
+                    ['Setting NaN', 'NaN', '0'],
+                    ['Setting null', 'null', '0'],
+                    ['Setting undefined', 'undefined', '0'],
+                    ['Setting true', 'true', '0'],
+                    ['Setting false', 'false', '0'],
+                    ['Setting an object', '{}', '0'],
+                    ['Setting an array', '[]', '0'],
+                    ['Setting a function', '() => {}', '0'],
+                    ['Setting a Symbol', 'Symbol()', '0'],
+                    ['Setting a BigInt', 'BigInt(1)', '0'],
+                ],
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await valueChange(context, { counter, setBy: setByProp });
+            await step('Edge case', async () => edgeCase(context, {
+                counter,
+                list: [
+                    ['Setting an empty string', '', 0],
+                    ['Setting a non-number', 'a', 0],
+                    ['Setting a decimal number', '1.1', 1.1],
+                    ['Setting a negative number', '-1', -1],
+                    ['Setting Infinity', 'Infinity', 0],
+                    ['Setting NaN', 'NaN', 0],
+                    ['Setting null', 'null', 0],
+                    ['Setting undefined', 'undefined', 0],
+                    ['Setting true', 'true', 0],
+                    ['Setting false', 'false', 0],
+                    ['Setting an object', '{}', 0],
+                    ['Setting an array', '[]', 0],
+                    ['Setting a function', '() => {}', 0],
+                    ['Setting a Symbol', 'Symbol()', 0],
+                    ['Setting a BigInt', 'BigInt(1)', 0],
+                ],
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Animation events', async () => animationEvents(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await step('Animation events', async () => animationEvents(context, {
+                counter,
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const AnimationOptions = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Animation options', async () => animationOptions(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        // await step('Testing with property', async () => {
+        //   await step('Animation options', async () =>
+        //     animationOptions(context, {
+        //       counter,
+        //       list,
+        //       setBy: setByProp,
+        //     }),
+        //   );
+        // });
+    },
+};
+export const Styles = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Styles', async () => styles(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await step('Styles', async () => styles(context, {
+                counter,
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+export const LocaleNumber = {
+    args: {
+        className: 'test-target',
+        animationOptions: {
+            duration: 100,
+        },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        await step('Testing with attribute', async () => {
+            await step('Locale number', async () => localeNumber(context, {
+                counter,
+                setBy: setByAttr,
+            }));
+        });
+        await step('Testing with property', async () => {
+            await step('Locale number', async () => localeNumber(context, {
+                counter,
+                setBy: setByProp,
+            }));
+        });
+    },
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/timered-counter-number/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-number/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  type TimeredCounter,\n  TimeredCounterNumber,\n} from '../../src/index.js';\nimport { valueChange } from '../story-parts/value-change.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { edgeCase } from '../story-parts/edge-case.js';\nimport { animationEvents } from '../story-parts/animation-events.js';\nimport { animationOptions } from '../story-parts/animation-options.js';\nimport { styles } from '../story-parts/styles.js';\nimport { localeNumber } from '../story-parts/locale-number.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nconst meta: Meta = {\n  title: 'TimeredCounterNumber',\n  component: 'timered-counter-number',\n  tags: ['autodocs', 'timered-counter-number'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('number');\n  },\n};\nexport default meta;\n\nexport const Basic: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    // @ts-ignore\n    value: '0',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await valueChange(context, {\n        counter,\n        setBy: setByAttr,\n      });\n\n      await step('Edge case', async () =>\n        edgeCase(context, {\n          counter,\n          list: [\n            ['Setting an empty string', '', '0'],\n            ['Setting a non-number', 'a', '0'],\n            ['Setting a decimal number', '1.1', '1.1'],\n            ['Setting a negative number', '-1', '-1'],\n            ['Setting Infinity', 'Infinity', '0'],\n            ['Setting NaN', 'NaN', '0'],\n            ['Setting null', 'null', '0'],\n            ['Setting undefined', 'undefined', '0'],\n            ['Setting true', 'true', '0'],\n            ['Setting false', 'false', '0'],\n            ['Setting an object', '{}', '0'],\n            ['Setting an array', '[]', '0'],\n            ['Setting a function', '() => {}', '0'],\n            ['Setting a Symbol', 'Symbol()', '0'],\n            ['Setting a BigInt', 'BigInt(1)', '0'],\n          ],\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await valueChange(context, { counter, setBy: setByProp });\n\n      await step('Edge case', async () =>\n        edgeCase(context, {\n          counter,\n          list: [\n            ['Setting an empty string', '', 0],\n            ['Setting a non-number', 'a', 0],\n            ['Setting a decimal number', '1.1', 1.1],\n            ['Setting a negative number', '-1', -1],\n            ['Setting Infinity', 'Infinity', 0],\n            ['Setting NaN', 'NaN', 0],\n            ['Setting null', 'null', 0],\n            ['Setting undefined', 'undefined', 0],\n            ['Setting true', 'true', 0],\n            ['Setting false', 'false', 0],\n            ['Setting an object', '{}', 0],\n            ['Setting an array', '[]', 0],\n            ['Setting a function', '() => {}', 0],\n            ['Setting a Symbol', 'Symbol()', 0],\n            ['Setting a BigInt', 'BigInt(1)', 0],\n          ],\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const Events: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Animation events', async () =>\n        animationEvents(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await step('Animation events', async () =>\n        animationEvents(context, {\n          counter,\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const AnimationOptions: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Animation options', async () =>\n        animationOptions(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    // await step('Testing with property', async () => {\n    //   await step('Animation options', async () =>\n    //     animationOptions(context, {\n    //       counter,\n    //       list,\n    //       setBy: setByProp,\n    //     }),\n    //   );\n    // });\n  },\n};\n\nexport const Styles: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Styles', async () =>\n        styles(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await step('Styles', async () =>\n        styles(context, {\n          counter,\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n\nexport const LocaleNumber: StoryObj<TimeredCounterNumber> = {\n  args: {\n    className: 'test-target',\n    animationOptions: {\n      duration: 100,\n    },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    await step('Testing with attribute', async () => {\n      await step('Locale number', async () =>\n        localeNumber(context, {\n          counter,\n          setBy: setByAttr,\n        }),\n      );\n    });\n\n    await step('Testing with property', async () => {\n      await step('Locale number', async () =>\n        localeNumber(context, {\n          counter,\n          setBy: setByProp,\n        }),\n      );\n    });\n  },\n};\n"]}

package/dist/stories/timered-counter-string/decimaljs.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { TimeredCounterString } from '../../src/index.js';
+export { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const Events: StoryObj<TimeredCounterString>;
+export declare const BigNumber: StoryObj<TimeredCounterString>;