timered-counter 0.0.0

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

@@ -0,0 +1,55 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import { expect } from '@storybook/test';
+import { range } from 'remeda';
+import { faker } from '@faker-js/faker';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, } from '../../src/index.js';
+import { bigNumber } from '../story-parts/big-number.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { animationEvents } from '../story-parts/animation-events.js';
+export { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';
+setCustomElementsManifest(customElementsManifest);
+function equal(counter, a, b) {
+    a = counter.getAttribute('aria-label')?.replaceAll(/\s/g, ' ');
+    return expect(a).toBe(b.toString());
+}
+const meta = {
+    title: 'TimeredCounterString/with decimal.js',
+    component: 'timered-counter-string',
+    tags: ['autodocs', 'timered-counter-string'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('decimal.js');
+    },
+};
+export default meta;
+export const Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: { duration: 100 },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = range(0, 5).map(() => faker.lorem.sentence({ min: 1, max: 2 }));
+        await step('Testing with attribute', () => animationEvents(context, { counter, list, setBy: setByAttr, equal }));
+        await step('Testing with property', () => animationEvents(context, { counter, list, setBy: setByProp, equal }));
+    },
+};
+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, equal }));
+        await step('Testing with property', async () => bigNumber(context, { counter, setBy: setByProp, equal }));
+    },
+};
+//# sourceMappingURL=decimaljs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"decimaljs.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-string/decimaljs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport { expect } from '@storybook/test';\nimport { range } from 'remeda';\nimport { faker } from '@faker-js/faker';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  type TimeredCounter,\n  TimeredCounterString,\n} from '../../src/index.js';\nimport { bigNumber } from '../story-parts/big-number.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { animationEvents } from '../story-parts/animation-events.js';\n\nexport { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nfunction equal(counter: TimeredCounter, a: any, b: any) {\n  a = counter.getAttribute('aria-label')?.replaceAll(/\\s/g, ' ');\n  return expect(a).toBe(b.toString());\n}\n\nconst meta: Meta = {\n  title: 'TimeredCounterString/with decimal.js',\n  component: 'timered-counter-string',\n  tags: ['autodocs', 'timered-counter-string'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('decimal.js');\n  },\n};\nexport default meta;\n\nexport const Events: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    const list = range(0, 5).map(() =>\n      faker.lorem.sentence({ min: 1, max: 2 }),\n    );\n\n    await step('Testing with attribute', () =>\n      animationEvents(context, { counter, list, setBy: setByAttr, equal }),\n    );\n\n    await step('Testing with property', () =>\n      animationEvents(context, { counter, list, setBy: setByProp, equal }),\n    );\n  },\n};\n\nexport const BigNumber: StoryObj<TimeredCounterString> = {\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, equal }),\n    );\n\n    await step('Testing with property', async () =>\n      bigNumber(context, { counter, setBy: setByProp, equal }),\n    );\n  },\n};\n"]}

package/dist/stories/timered-counter-string/grapheme-splitter.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>;

package/dist/stories/timered-counter-string/grapheme-splitter.stories.js

@@ -0,0 +1,56 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import { expect } from '@storybook/test';
+import { range } from 'remeda';
+import { faker } from '@faker-js/faker';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, setStringAdapter, } from '../../src/index.js';
+import { bigNumber } from '../story-parts/big-number.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { animationEvents } from '../story-parts/animation-events.js';
+export { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';
+setCustomElementsManifest(customElementsManifest);
+function equal(counter, a, b) {
+    a = counter.getAttribute('aria-label')?.replaceAll(/\s/g, ' ');
+    return expect(a).toBe(b.toString());
+}
+const meta = {
+    title: 'TimeredCounterString/with grapheme-splitter',
+    component: 'timered-counter-string',
+    tags: ['autodocs', 'timered-counter-string'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('decimal.js');
+        setStringAdapter('grapheme-splitter');
+    },
+};
+export default meta;
+export const Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: { duration: 100 },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = range(0, 5).map(() => faker.lorem.sentence({ min: 1, max: 2 }));
+        await step('Testing with attribute', () => animationEvents(context, { counter, list, setBy: setByAttr, equal }));
+        await step('Testing with property', () => animationEvents(context, { counter, list, setBy: setByProp, equal }));
+    },
+};
+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, equal }));
+        await step('Testing with property', async () => bigNumber(context, { counter, setBy: setByProp, equal }));
+    },
+};
+//# sourceMappingURL=grapheme-splitter.stories.js.map

package/dist/stories/timered-counter-string/grapheme-splitter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grapheme-splitter.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-string/grapheme-splitter.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport { expect } from '@storybook/test';\nimport { range } from 'remeda';\nimport { faker } from '@faker-js/faker';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  setStringAdapter,\n  type TimeredCounter,\n  TimeredCounterString,\n} from '../../src/index.js';\nimport { bigNumber } from '../story-parts/big-number.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { animationEvents } from '../story-parts/animation-events.js';\n\nexport { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nfunction equal(counter: TimeredCounter, a: any, b: any) {\n  a = counter.getAttribute('aria-label')?.replaceAll(/\\s/g, ' ');\n  return expect(a).toBe(b.toString());\n}\n\nconst meta: Meta = {\n  title: 'TimeredCounterString/with grapheme-splitter',\n  component: 'timered-counter-string',\n  tags: ['autodocs', 'timered-counter-string'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('decimal.js');\n    setStringAdapter('grapheme-splitter');\n  },\n};\nexport default meta;\n\nexport const Events: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    const list = range(0, 5).map(() =>\n      faker.lorem.sentence({ min: 1, max: 2 }),\n    );\n\n    await step('Testing with attribute', () =>\n      animationEvents(context, { counter, list, setBy: setByAttr, equal }),\n    );\n\n    await step('Testing with property', () =>\n      animationEvents(context, { counter, list, setBy: setByProp, equal }),\n    );\n  },\n};\n\nexport const BigNumber: StoryObj<TimeredCounterString> = {\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, equal }),\n    );\n\n    await step('Testing with property', async () =>\n      bigNumber(context, { counter, setBy: setByProp, equal }),\n    );\n  },\n};\n"]}

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

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

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

@@ -0,0 +1,126 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import { expect } from '@storybook/test';
+import { range } from 'remeda';
+import { faker } from '@faker-js/faker';
+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 { animationEvents } from '../story-parts/animation-events.js';
+import { animationOptions } from '../story-parts/animation-options.js';
+import { styles } from '../story-parts/styles.js';
+import { emoji } from '../story-parts/emoji.js';
+setCustomElementsManifest(customElementsManifest);
+//
+// function setByAttr(element: TimeredCounter, attr: string, value: string) {
+//   element.setAttribute(attr, value);
+// }
+//
+// function setByProp(element: TimeredCounter, prop: string, value: any) {
+//   // @ts-ignore
+//   element[prop] = value.toString();
+// }
+function equal(counter, a, b) {
+    a = counter.getAttribute('aria-label')?.replaceAll(/\s/g, ' ');
+    return expect(a).toBe(b.toString());
+}
+const meta = {
+    title: 'TimeredCounterString',
+    component: 'timered-counter-string',
+    tags: ['autodocs', 'timered-counter-string'],
+    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 = [
+            'Hello, World!',
+            '你好，世界！',
+            'こんにちは、世界！',
+            '안녕하세요, 세계!',
+            // 太长了
+            // "Bonjour, le monde!",
+            'Hallo, Welt!',
+            'Ciao, mondo!',
+            'Olá, mundo!',
+            'Привет, мир!',
+            // '¡Hola, mundo!',
+            // 'Hej, världen!',
+            // 'Merhaba, Dünya!',
+            // 'مرحبا بالعالم!',
+            // 'שלום, עולם!',
+            // 'नमस्ते, दुनिया!',
+            // 'سلام دنیا!',
+        ];
+        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 Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: { duration: 100 },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = range(0, 5).map(() => faker.lorem.word({ length: { min: 5, max: 10 } }));
+        await step('Testing with attribute', () => animationEvents(context, { counter, list, setBy: setByAttr, equal }));
+        await step('Testing with property', () => animationEvents(context, { counter, list, setBy: setByProp, equal }));
+    },
+};
+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', () => animationOptions(context, { counter, setBy: setByAttr }));
+    },
+};
+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', () => styles(context, { counter, setBy: setByAttr }));
+        await step('Testing with property', () => styles(context, { counter, setBy: setByProp }));
+    },
+};
+export const Emoji = {
+    args: {
+        className: 'test-target',
+        animationOptions: { duration: 100 },
+        // partsOptions: {
+        //   fillChar: '1',
+        // },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = ['⌚', '↔️', '👩', '👩🏿', '🧑‍💻'];
+        await step('Testing with attribute', () => emoji(context, { counter, list, setBy: setByAttr, equal }));
+        await step('Testing with property', () => emoji(context, { counter, list, setBy: setByProp, equal }));
+    },
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-string/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,GAE1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,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,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;AAElD,EAAE;AACF,6EAA6E;AAC7E,uCAAuC;AACvC,IAAI;AACJ,EAAE;AACF,0EAA0E;AAC1E,kBAAkB;AAClB,sCAAsC;AACtC,IAAI;AAEJ,SAAS,KAAK,CAAC,OAAuB,EAAE,CAAM,EAAE,CAAM;IACpD,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,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,QAAQ,CAAC,CAAC;IAC7B,CAAC;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,KAAK,GAAmC;IACnD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACpC;IACD,KAAK,CAAC,IAAI,CAAC,OAAO;QAChB,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;QAExC,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CACzC,cAAc,CACS,CAAC;QAE1B,MAAM,IAAI,GAAa;YACrB,eAAe;YACf,QAAQ;YACR,WAAW;YACX,YAAY;YACZ,MAAM;YACN,wBAAwB;YACxB,cAAc;YACd,cAAc;YACd,aAAa;YACb,cAAc;YACd,mBAAmB;YACnB,mBAAmB;YACnB,qBAAqB;YACrB,oBAAoB;YACpB,iBAAiB;YACjB,qBAAqB;YACrB,gBAAgB;SACjB,CAAC;QAEF,MAAM,IAAI,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;YAC9C,MAAM,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;YAC7C,MAAM,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAmC;IACpD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACpC;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,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAClD,CAAC;QAEF,MAAM,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE,CACxC,eAAe,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACrE,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CACvC,eAAe,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACrE,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAmC;IAC9D,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACpC;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,GAAG,EAAE,CACxC,gBAAgB,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CACzD,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAmC;IACpD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACpC;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,GAAG,EAAE,CACxC,MAAM,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAC/C,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CACvC,MAAM,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAC/C,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAmC;IACnD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;QACnC,kBAAkB;QAClB,mBAAmB;QACnB,KAAK;KACN;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,GAAa,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAE1D,MAAM,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE,CACxC,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC3D,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CACvC,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC3D,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport { expect } from '@storybook/test';\nimport { range } from 'remeda';\nimport { faker } from '@faker-js/faker';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  type TimeredCounter,\n  TimeredCounterString,\n} from '../../src/index.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { valueChange } from '../story-parts/value-change.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 { emoji } from '../story-parts/emoji.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\n//\n// function setByAttr(element: TimeredCounter, attr: string, value: string) {\n//   element.setAttribute(attr, value);\n// }\n//\n// function setByProp(element: TimeredCounter, prop: string, value: any) {\n//   // @ts-ignore\n//   element[prop] = value.toString();\n// }\n\nfunction equal(counter: TimeredCounter, a: any, b: any) {\n  a = counter.getAttribute('aria-label')?.replaceAll(/\\s/g, ' ');\n  return expect(a).toBe(b.toString());\n}\n\nconst meta: Meta = {\n  title: 'TimeredCounterString',\n  component: 'timered-counter-string',\n  tags: ['autodocs', 'timered-counter-string'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('number');\n  },\n};\nexport default meta;\n\nexport const Basic: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounterString;\n\n    const list: string[] = [\n      'Hello, World!',\n      '你好，世界！',\n      'こんにちは、世界！',\n      '안녕하세요, 세계!',\n      // 太长了\n      // \"Bonjour, le monde!\",\n      'Hallo, Welt!',\n      'Ciao, mondo!',\n      'Olá, mundo!',\n      'Привет, мир!',\n      // '¡Hola, mundo!',\n      // 'Hej, världen!',\n      // 'Merhaba, Dünya!',\n      // 'مرحبا بالعالم!',\n      // 'שלום, עולם!',\n      // 'नमस्ते, दुनिया!',\n      // 'سلام دنیا!',\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 Events: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    const list = range(0, 5).map(() =>\n      faker.lorem.word({ length: { min: 5, max: 10 } }),\n    );\n\n    await step('Testing with attribute', () =>\n      animationEvents(context, { counter, list, setBy: setByAttr, equal }),\n    );\n\n    await step('Testing with property', () =>\n      animationEvents(context, { counter, list, setBy: setByProp, equal }),\n    );\n  },\n};\n\nexport const AnimationOptions: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\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', () =>\n      animationOptions(context, { counter, setBy: setByAttr }),\n    );\n  },\n};\n\nexport const Styles: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\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', () =>\n      styles(context, { counter, setBy: setByAttr }),\n    );\n\n    await step('Testing with property', () =>\n      styles(context, { counter, setBy: setByProp }),\n    );\n  },\n};\n\nexport const Emoji: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n    // partsOptions: {\n    //   fillChar: '1',\n    // },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    const list: string[] = ['⌚', '↔️', '👩', '👩🏿', '🧑‍💻'];\n\n    await step('Testing with attribute', () =>\n      emoji(context, { counter, list, setBy: setByAttr, equal }),\n    );\n\n    await step('Testing with property', () =>\n      emoji(context, { counter, list, setBy: setByProp, equal }),\n    );\n  },\n};\n"]}

package/dist/stories/timered-counter-string/intl-segmenter.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>;

package/dist/stories/timered-counter-string/intl-segmenter.stories.js

@@ -0,0 +1,56 @@
+import { setCustomElementsManifest, } from '@storybook/web-components';
+import { expect } from '@storybook/test';
+import { range } from 'remeda';
+import { faker } from '@faker-js/faker';
+import customElementsManifest from '../../custom-elements.json' with { type: 'json' };
+import { setNumberAdapter, setStringAdapter, } from '../../src/index.js';
+import { bigNumber } from '../story-parts/big-number.js';
+import { setByAttr, setByProp } from '../utils/index.js';
+import { animationEvents } from '../story-parts/animation-events.js';
+export { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';
+setCustomElementsManifest(customElementsManifest);
+function equal(counter, a, b) {
+    a = counter.getAttribute('aria-label')?.replaceAll(/\s/g, ' ');
+    return expect(a).toBe(b.toString());
+}
+const meta = {
+    title: 'TimeredCounterString/with Intl Segmenter',
+    component: 'timered-counter-string',
+    tags: ['autodocs', 'timered-counter-string'],
+    parameters: {
+        controls: { expanded: true },
+    },
+    beforeEach: () => {
+        setNumberAdapter('decimal.js');
+        setStringAdapter('intl-segmenter');
+    },
+};
+export default meta;
+export const Events = {
+    args: {
+        className: 'test-target',
+        animationOptions: { duration: 100 },
+    },
+    async play(context) {
+        const { canvasElement, step } = context;
+        const counter = canvasElement.querySelector('.test-target');
+        const list = range(0, 5).map(() => faker.lorem.sentence({ min: 1, max: 2 }));
+        await step('Testing with attribute', () => animationEvents(context, { counter, list, setBy: setByAttr, equal }));
+        await step('Testing with property', () => animationEvents(context, { counter, list, setBy: setByProp, equal }));
+    },
+};
+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, equal }));
+        await step('Testing with property', async () => bigNumber(context, { counter, setBy: setByProp, equal }));
+    },
+};
+//# sourceMappingURL=intl-segmenter.stories.js.map

package/dist/stories/timered-counter-string/intl-segmenter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intl-segmenter.stories.js","sourceRoot":"","sources":["../../../stories/timered-counter-string/intl-segmenter.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,GAE1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,sBAAsB,MAAM,4BAA4B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACtF,OAAO,EACL,gBAAgB,EAChB,gBAAgB,GAGjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE5E,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;AAElD,SAAS,KAAK,CAAC,OAAuB,EAAE,CAAM,EAAE,CAAM;IACpD,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0CAA0C;IACjD,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;QAC/B,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACrC,CAAC;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,MAAM,GAAmC;IACpD,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACpC;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,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACzC,CAAC;QAEF,MAAM,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE,CACxC,eAAe,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACrE,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CACvC,eAAe,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACrE,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,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,KAAK,EAAE,CAAC,CACzD,CAAC;QAEF,MAAM,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE,CAC7C,SAAS,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACzD,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import {\n  Meta,\n  setCustomElementsManifest,\n  StoryObj,\n} from '@storybook/web-components';\nimport { expect } from '@storybook/test';\nimport { range } from 'remeda';\nimport { faker } from '@faker-js/faker';\nimport customElementsManifest from '../../custom-elements.json' with { type: 'json' };\nimport {\n  setNumberAdapter,\n  setStringAdapter,\n  type TimeredCounter,\n  TimeredCounterString,\n} from '../../src/index.js';\nimport { bigNumber } from '../story-parts/big-number.js';\nimport { setByAttr, setByProp } from '../utils/index.js';\nimport { animationEvents } from '../story-parts/animation-events.js';\n\nexport { Basic, AnimationOptions, Styles, Emoji } from './index.stories.js';\n\nsetCustomElementsManifest(customElementsManifest);\n\nfunction equal(counter: TimeredCounter, a: any, b: any) {\n  a = counter.getAttribute('aria-label')?.replaceAll(/\\s/g, ' ');\n  return expect(a).toBe(b.toString());\n}\n\nconst meta: Meta = {\n  title: 'TimeredCounterString/with Intl Segmenter',\n  component: 'timered-counter-string',\n  tags: ['autodocs', 'timered-counter-string'],\n  parameters: {\n    controls: { expanded: true },\n  },\n  beforeEach: () => {\n    setNumberAdapter('decimal.js');\n    setStringAdapter('intl-segmenter');\n  },\n};\nexport default meta;\n\nexport const Events: StoryObj<TimeredCounterString> = {\n  args: {\n    className: 'test-target',\n    animationOptions: { duration: 100 },\n  },\n  async play(context) {\n    const { canvasElement, step } = context;\n    const counter = canvasElement.querySelector(\n      '.test-target',\n    ) as TimeredCounter;\n\n    const list = range(0, 5).map(() =>\n      faker.lorem.sentence({ min: 1, max: 2 }),\n    );\n\n    await step('Testing with attribute', () =>\n      animationEvents(context, { counter, list, setBy: setByAttr, equal }),\n    );\n\n    await step('Testing with property', () =>\n      animationEvents(context, { counter, list, setBy: setByProp, equal }),\n    );\n  },\n};\n\nexport const BigNumber: StoryObj<TimeredCounterString> = {\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, equal }),\n    );\n\n    await step('Testing with property', async () =>\n      bigNumber(context, { counter, setBy: setByProp, equal }),\n    );\n  },\n};\n"]}

package/dist/stories/utils/index.d.ts

@@ -0,0 +1,8 @@
+import type { TimeredCounter } from '../../src/index.js';
+export declare function equal(counter: TimeredCounter, a: any, b: any): Promise<void>;
+export declare function setByAttr(element: TimeredCounter, attr: string, value: any): void;
+export declare function setByProp(element: TimeredCounter, prop: string, value: any): void;
+export declare function sleep(ms: number): Promise<unknown>;
+export type NoUndefinedField<T> = {
+    [P in keyof T]-?: T[P];
+};

package/dist/stories/utils/index.js

@@ -0,0 +1,20 @@
+import { expect } from '@storybook/test';
+import { isString } from 'remeda';
+export function equal(counter, a, b) {
+    const na = counter.numberAdapter;
+    return expect(na.toString(a)).toBe(na.toString(na.create(b)));
+}
+export function setByAttr(element, attr, value) {
+    value = isString(value) ? value : value.toString();
+    element.setAttribute(attr, value);
+}
+export function setByProp(element, prop, value) {
+    // @ts-ignore
+    element[prop] = value;
+}
+export function sleep(ms) {
+    return new Promise(resolve => {
+        setTimeout(resolve, ms);
+    });
+}
+//# sourceMappingURL=index.js.map

package/dist/stories/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../stories/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,MAAM,UAAU,KAAK,CAAC,OAAuB,EAAE,CAAM,EAAE,CAAM;IAC3D,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAAC;IACjC,OAAO,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAuB,EAAE,IAAY,EAAE,KAAU;IACzE,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAuB,EAAE,IAAY,EAAE,KAAU;IACzE,aAAa;IACb,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,EAAU;IAC9B,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { expect } from '@storybook/test';\nimport { isString } from 'remeda';\nimport type { TimeredCounter } from '../../src/index.js';\n\nexport function equal(counter: TimeredCounter, a: any, b: any) {\n  const na = counter.numberAdapter;\n  return expect(na.toString(a)).toBe(na.toString(na.create(b)));\n}\n\nexport function setByAttr(element: TimeredCounter, attr: string, value: any) {\n  value = isString(value) ? value : value.toString();\n  element.setAttribute(attr, value);\n}\n\nexport function setByProp(element: TimeredCounter, prop: string, value: any) {\n  // @ts-ignore\n  element[prop] = value;\n}\n\nexport function sleep(ms: number) {\n  return new Promise(resolve => {\n    setTimeout(resolve, ms);\n  });\n}\n\nexport type NoUndefinedField<T> = { [P in keyof T]-?: T[P] };\n"]}

package/dist/test/td-counter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/td-counter.test.js

@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+describe('TimeredCounter', () => {
+    it('has a default header "Hey there" and counter 5', async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const el = await fixture(html `<timered-counter></timered-counter>`);
+        // expect(el.header).to.equal('Hey there');
+        // expect(el.counter).to.equal(5);
+    });
+    it('increases the counter on button click', async () => {
+        const el = await fixture(html `<timered-counter></timered-counter>`);
+        el.shadowRoot.querySelector('button').click();
+        // expect(el.counter).to.equal(6);
+    });
+    it('can override the header via attribute', async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const el = await fixture(html `<timered-counter header="attribute header"></timered-counter>`);
+        // expect(el.header).to.equal('attribute header');
+    });
+    it('passes the a11y audit', async () => {
+        const el = await fixture(html `<timered-counter></timered-counter>`);
+        await expect(el).shadowDom.to.be.accessible();
+    });
+});
+//# sourceMappingURL=td-counter.test.js.map

package/dist/test/td-counter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"td-counter.test.js","sourceRoot":"","sources":["../../test/td-counter.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,6DAA6D;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,qCAAqC,CAC1C,CAAC;QAEF,2CAA2C;QAC3C,kCAAkC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,qCAAqC,CAC1C,CAAC;QACF,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;QAEhD,kCAAkC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,6DAA6D;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,+DAA+D,CACpE,CAAC;QAEF,kDAAkD;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,qCAAqC,CAC1C,CAAC;QAEF,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { TimeredCounter } from '../src/index.js';\n\ndescribe('TimeredCounter', () => {\n  it('has a default header \"Hey there\" and counter 5', async () => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const el = await fixture<TimeredCounter>(\n      html`<timered-counter></timered-counter>`,\n    );\n\n    // expect(el.header).to.equal('Hey there');\n    // expect(el.counter).to.equal(5);\n  });\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<TimeredCounter>(\n      html`<timered-counter></timered-counter>`,\n    );\n    el.shadowRoot!.querySelector('button')!.click();\n\n    // expect(el.counter).to.equal(6);\n  });\n\n  it('can override the header via attribute', async () => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const el = await fixture<TimeredCounter>(\n      html`<timered-counter header=\"attribute header\"></timered-counter>`,\n    );\n\n    // expect(el.header).to.equal('attribute header');\n  });\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<TimeredCounter>(\n      html`<timered-counter></timered-counter>`,\n    );\n\n    await expect(el).shadowDom.to.be.accessible();\n  });\n});\n"]}