npm - kemet-ui - Versions diffs - 3.0.1 → 3.1.0 - Mend

kemet-ui 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (251) hide show

package/dist/components/kemet-carousel/spec.js ADDED Viewed

@@ -0,0 +1,168 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import { getByText, waitFor } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import './kemet-carousel';
+import './kemet-carousel-slide';
+import './kemet-carousel-current';
+import './kemet-carousel-total';
+import './kemet-carousel-next';
+import './kemet-carousel-prev';
+import './kemet-carousel-first';
+import './kemet-carousel-last';
+import './kemet-carousel-link';
+import '../kemet-icon/kemet-icon';
+describe('Carousel', () => {
+    const templates = {
+        default: html `
+      <kemet-carousel>
+        <kemet-carousel-slide slot="slides">Slide 1</kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides">Slide 2</kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides">Slide 3</kemet-carousel-slide>
+      </kemet-carousel>
+    `,
+        descriptionBar: html `
+      <kemet-carousel>
+        <kemet-carousel-slide slot="slides">Slide 1</kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides">Slide 2</kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides">Slide 3</kemet-carousel-slide>
+        <div slot="toolbar">
+          <div>
+            <kemet-carousel-current></kemet-carousel-current>
+            &nbsp;of&nbsp;
+            <kemet-carousel-total></kemet-carousel-total>
+            :&nbsp;
+            <kemet-carousel-information>
+              <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide 1.</span>
+            </kemet-carousel-information>
+          </div>
+          <kemet-carousel-prev>
+            <kemet-badge circle>
+              <kemet-icon icon="chevron-left"></kemet-icon>
+            </kemet-badge>
+          </kemet-carousel-prev>
+          <kemet-carousel-next>
+            <kemet-badge circle>
+              <kemet-icon icon="chevron-right"></kemet-icon>
+            </kemet-badge>
+          </kemet-carousel-next>
+        </div>
+      </kemet-carousel>
+    `,
+        paginationBar: html `
+      <kemet-carousel>
+        <kemet-carousel-slide slot="slides" selected>
+          <figure>
+            <h3>Slide 1</h3>
+            <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" />
+            <figcaption>An image in a carousel.</figcaption>
+          </figure>
+          <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide 1. </span>
+        </kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides" selected>
+          <figure>
+            <h3>Slide 2</h3>
+            <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" />
+            <figcaption>An image in a carousel.</figcaption>
+          </figure>
+          <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide 2. </span>
+        </kemet-carousel-slide>
+        <kemet-carousel-slide slot="slides" selected>
+          <figure>
+            <h3>Slide 3</h3>
+            <img src="https://via.placeholder.com/1920x1080" alt="a placeholder" />
+            <figcaption>An image in a carousel.</figcaption>
+          </figure>
+          <span slot="information"><a href="https://google.com" target="_blank">Title</a>. An image of slide 3.</span>
+        </kemet-carousel-slide>
+        <kemet-carousel-first slot="toolbar">
+          <kemet-icon icon="chevron-double-left"></kemet-icon>
+        </kemet-carousel-first>
+        <kemet-carousel-prev slot="toolbar">
+          <kemet-icon icon="chevron-left"></kemet-icon>
+        </kemet-carousel-prev>
+        <kemet-carousel-link slot="toolbar" slide="0">1</kemet-carousel-link>
+        <kemet-carousel-link slot="toolbar" slide="1">2</kemet-carousel-link>
+        <kemet-carousel-link slot="toolbar" slide="2">3</kemet-carousel-link>
+        <kemet-carousel-next slot="toolbar">
+          <kemet-icon icon="chevron-right"></kemet-icon>
+        </kemet-carousel-next>
+        <kemet-carousel-last slot="toolbar">
+          <kemet-icon icon="chevron-double-right"></kemet-icon>
+        </kemet-carousel-last>
+      </kemet-carousel>
+    `,
+    };
+    it('displays a carousel', async () => {
+        render(templates.descriptionBar, document.body);
+        const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+        expect(carousel).toBeTruthy();
+    });
+    describe('Navigation', () => {
+        it('handles navigation to the next slide', async () => {
+            render(templates.paginationBar, document.body);
+            const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+            await waitFor(async () => {
+                const next = carousel.querySelector('kemet-carousel-next').shadowRoot.querySelector('button');
+                await userEvent.click(next);
+                next.focus();
+                await userEvent.keyboard('[Enter]');
+                expect(carousel.index).toBe(2);
+            });
+        });
+        it('handles navigation to the previous slide', async () => {
+            render(templates.paginationBar, document.body);
+            const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+            carousel.index = 2;
+            await waitFor(async () => {
+                const prev = carousel.querySelector('kemet-carousel-prev').shadowRoot.querySelector('button');
+                await userEvent.click(prev);
+                prev.focus();
+                await userEvent.keyboard('[Enter]');
+                expect(carousel.index).toBe(0);
+            });
+        });
+        it('handles navigation to the last slide', async () => {
+            render(templates.paginationBar, document.body);
+            const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+            await waitFor(async () => {
+                const last = carousel.querySelector('kemet-carousel-last').shadowRoot.querySelector('button');
+                await userEvent.click(last);
+                last.focus();
+                await userEvent.keyboard('[Enter]');
+                expect(carousel.index).toBe(2);
+            });
+        });
+        it('handles navigation to the first slide', async () => {
+            render(templates.paginationBar, document.body);
+            const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+            carousel.index = 2;
+            await waitFor(async () => {
+                const first = carousel.querySelector('kemet-carousel-first').shadowRoot.querySelector('button');
+                await userEvent.click(first);
+                first.focus();
+                await userEvent.keyboard('[Enter]');
+                expect(carousel.index).toBe(0);
+            });
+        });
+        it('handles navigation a specific slide', async () => {
+            render(templates.paginationBar, document.body);
+            const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');
+            carousel.index = 2;
+            await waitFor(async () => {
+                const links = carousel.querySelectorAll('kemet-carousel-link');
+                const second = links[1].shadowRoot.querySelector('button');
+                await userEvent.click(second);
+                second.focus();
+                await userEvent.keyboard('[Enter]');
+                expect(carousel.index).toBe(1);
+            });
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-carousel/spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { getByText, waitFor } from '@testing-library/dom';\nimport userEvent from '@testing-library/user-event';\n\nimport './kemet-carousel';\nimport './kemet-carousel-slide';\nimport './kemet-carousel-current';\nimport './kemet-carousel-total';\nimport './kemet-carousel-next';\nimport './kemet-carousel-prev';\nimport './kemet-carousel-first';\nimport './kemet-carousel-last';\nimport './kemet-carousel-link';\nimport '../kemet-icon/kemet-icon';\n\ndescribe('Carousel', () => {\n const templates = {\n default: html`\n <kemet-carousel>\n <kemet-carousel-slide slot=\"slides\">Slide 1</kemet-carousel-slide>\n <kemet-carousel-slide slot=\"slides\">Slide 2</kemet-carousel-slide>\n <kemet-carousel-slide slot=\"slides\">Slide 3</kemet-carousel-slide>\n </kemet-carousel>\n `,\n descriptionBar: html`\n <kemet-carousel>\n <kemet-carousel-slide slot=\"slides\">Slide 1</kemet-carousel-slide>\n <kemet-carousel-slide slot=\"slides\">Slide 2</kemet-carousel-slide>\n <kemet-carousel-slide slot=\"slides\">Slide 3</kemet-carousel-slide>\n <div slot=\"toolbar\">\n <div>\n <kemet-carousel-current></kemet-carousel-current>\n  of \n <kemet-carousel-total></kemet-carousel-total>\n : \n <kemet-carousel-information>\n <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide 1.</span>\n </kemet-carousel-information>\n </div>\n <kemet-carousel-prev>\n <kemet-badge circle>\n <kemet-icon icon=\"chevron-left\"></kemet-icon>\n </kemet-badge>\n </kemet-carousel-prev>\n <kemet-carousel-next>\n <kemet-badge circle>\n <kemet-icon icon=\"chevron-right\"></kemet-icon>\n </kemet-badge>\n </kemet-carousel-next>\n </div>\n </kemet-carousel>\n `,\n paginationBar: html`\n <kemet-carousel>\n <kemet-carousel-slide slot=\"slides\" selected>\n <figure>\n <h3>Slide 1</h3>\n <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />\n <figcaption>An image in a carousel.</figcaption>\n </figure>\n <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide 1. </span>\n </kemet-carousel-slide>\n\n <kemet-carousel-slide slot=\"slides\" selected>\n <figure>\n <h3>Slide 2</h3>\n <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />\n <figcaption>An image in a carousel.</figcaption>\n </figure>\n <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide 2. </span>\n </kemet-carousel-slide>\n\n <kemet-carousel-slide slot=\"slides\" selected>\n <figure>\n <h3>Slide 3</h3>\n <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />\n <figcaption>An image in a carousel.</figcaption>\n </figure>\n <span slot=\"information\"><a href=\"https://google.com\" target=\"_blank\">Title</a>. An image of slide 3.</span>\n </kemet-carousel-slide>\n\n <kemet-carousel-first slot=\"toolbar\">\n <kemet-icon icon=\"chevron-double-left\"></kemet-icon>\n </kemet-carousel-first>\n <kemet-carousel-prev slot=\"toolbar\">\n <kemet-icon icon=\"chevron-left\"></kemet-icon>\n </kemet-carousel-prev>\n\n <kemet-carousel-link slot=\"toolbar\" slide=\"0\">1</kemet-carousel-link>\n <kemet-carousel-link slot=\"toolbar\" slide=\"1\">2</kemet-carousel-link>\n <kemet-carousel-link slot=\"toolbar\" slide=\"2\">3</kemet-carousel-link>\n\n <kemet-carousel-next slot=\"toolbar\">\n <kemet-icon icon=\"chevron-right\"></kemet-icon>\n </kemet-carousel-next>\n <kemet-carousel-last slot=\"toolbar\">\n <kemet-icon icon=\"chevron-double-right\"></kemet-icon>\n </kemet-carousel-last>\n </kemet-carousel>\n `,\n };\n\n it('displays a carousel', async () => {\n render(templates.descriptionBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n expect(carousel).toBeTruthy();\n });\n\n describe('Navigation', () => {\n it('handles navigation to the next slide', async () => {\n render(templates.paginationBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n\n await waitFor(async () => {\n const next = carousel.querySelector('kemet-carousel-next').shadowRoot.querySelector('button');\n await userEvent.click(next);\n next.focus();\n await userEvent.keyboard('[Enter]');\n expect(carousel.index).toBe(2);\n });\n });\n\n it('handles navigation to the previous slide', async () => {\n render(templates.paginationBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n carousel.index = 2;\n\n await waitFor(async () => {\n const prev = carousel.querySelector('kemet-carousel-prev').shadowRoot.querySelector('button');\n await userEvent.click(prev);\n prev.focus();\n await userEvent.keyboard('[Enter]');\n expect(carousel.index).toBe(0);\n });\n });\n\n it('handles navigation to the last slide', async () => {\n render(templates.paginationBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n\n await waitFor(async () => {\n const last = carousel.querySelector('kemet-carousel-last').shadowRoot.querySelector('button');\n await userEvent.click(last);\n last.focus();\n await userEvent.keyboard('[Enter]');\n expect(carousel.index).toBe(2);\n });\n });\n\n it('handles navigation to the first slide', async () => {\n render(templates.paginationBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n carousel.index = 2;\n\n await waitFor(async () => {\n const first = carousel.querySelector('kemet-carousel-first').shadowRoot.querySelector('button');\n await userEvent.click(first);\n first.focus();\n await userEvent.keyboard('[Enter]');\n expect(carousel.index).toBe(0);\n });\n });\n\n it('handles navigation a specific slide', async () => {\n render(templates.paginationBar, document.body);\n const carousel = getByText(document.body, 'Slide 1').closest('kemet-carousel');\n carousel.index = 2;\n\n await waitFor(async () => {\n const links = carousel.querySelectorAll('kemet-carousel-link');\n const second = links[1].shadowRoot.querySelector('button');\n await userEvent.click(second);\n second.focus();\n await userEvent.keyboard('[Enter]');\n expect(carousel.index).toBe(1);\n });\n });\n });\n});\n"]}

package/dist/components/kemet-checkbox/docs/stories.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Indeterminate: Story;
 export declare const Disabled: Story;

package/dist/components/kemet-checkbox/kemet-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-checkbox.js","sourceRoot":"","sources":["../../../src/components/kemet-checkbox/kemet-checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;~~AAGH~~,~~IAAqB~~,aAAa,~~GAAlC~~,~~MAAqB~~,aAAc,SAAQ,UAAU;IA6CnD;QACE,KAAK,EAAE,CAAC;QAvCV,UAAK,GAAW,EAAE,CAAC;QASnB,SAAI,GAAW,UAAU,CAAC;QAM1B,aAAQ,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAY,KAAK,CAAC;QAM1B,YAAO,GAAY,KAAK,CAAC;QAGzB,WAAM,GAAY,KAAK,CAAC;QAGxB,WAAM,GAAe,UAAU,CAAC;QAW9B,gBAAgB;QAChB,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBAClB,IAAI,CAAC,KAAK;2BACF,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;qBAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;sBACjB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;kBACzB,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;mBACtB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBACvB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;6CAEA,IAAI,CAAC,KAAK;YAC3C,IAAI,CAAC,aAAa,EAAE;;4BAEJ,IAAI,CAAC,KAAK;;QAE9B,IAAI,CAAC,WAAW,EAAE;KACrB,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,EAAE;~~YAC9B~~,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;~~SAC1B~~;IACH,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;~~YACxD~~,OAAO,IAAI,CAAA,wBAAwB,IAAI,CAAC,OAAO,SAAS,CAAC;~~SAC1D~~;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,OAAO,EAAE;~~YAChB~~,OAAO,IAAI,CAAA;;;;;;;;;;;;;OAaV,CAAC;~~SACH~~;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;~~YACvC~~,OAAO,IAAI,CAAA;;;;;;;;;;;;OAYV,CAAC;~~SACH~~;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IACpC,CAAC~~;CACF~~,~~CAAA;AAtJQ,~~oBAAM,GAAG,CAAC,UAAU,CAAC,~~CAAC~~;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACpB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACD;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAClB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACX;AAGhB;IADC,KAAK,CAAC,OAAO,CAAC;4CACS;AA3CL,aAAa;IADjC,aAAa,CAAC,gBAAgB,CAAC;GACX,aAAa,CA0JjC;eA1JoB,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-checkbox\n * @summary An enhanced checkbox.\n \n @prop {string} label - Label text for the checkbox\n * @prop {boolean} checked - Determines if the checkbox is selected\n * @prop {boolean} indeterminate - An indeterminate selection status\n * @prop {string} name - Name of the checkbox\n * @prop {string} value - Value of the checkbox\n * @prop {boolean} disabled - Determines if a checkbox is disabled\n * @prop {boolean} required - Determines if a checkbox is required\n * @prop {boolean} focused - Is true when the checkbox is focused\n * @prop {boolean} rounded - Gives the checkbox rounded edges\n * @prop {boolean} filled - Fills the checkbox with color\n * @prop {string} status - The status of the checkbox\n * @prop {string} message - Message associated with checkbox status\n \n @csspart label - The label element.\n * @csspart text - The label's text.\n * @csspart mark - The icon of the check mark.\n \n @cssproperty --kemet-checkbox-size - The width and height of the checkbox.\n * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.\n * @cssproperty --kemet-checkbox-border - The border of the checkbox.\n * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.\n * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.\n * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.\n \n @event kemet-checkbox-change - Fires when the state of the checkbox changes\n * @event kemet-checkbox-focused - Fires when the checkbox loses or receives focus\n \n /\n\n@customElement('kemet-checkbox')\nexport default class KemetCheckbox extends LitElement {\n /** @internal /\n formSubmitController: FormSubmitController;\n\n static styles = [stylesBase];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean;\n\n @property({ type: Boolean, reflect: true })\n indeterminate: boolean;\n\n @property({ type: String })\n name: string = 'checkbox';\n\n @property({ type: Boolean })\n value: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n required: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean = false;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: String })\n message: string;\n\n @query('input')\n input: HTMLInputElement;\n\n constructor() {\n super();\n\n /* @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${() => this.handleClick()}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n @change=${() => this.handleChange()}\n />\n <button part=\"checkbox\" aria-label=${this.label}>\n ${this.makeCheckMark()}\n </button>\n <span part=\"text\">${this.label}</span>\n </label>\n ${this.makeMessage()}\n `;\n }\n\n click() {\n this.input.click();\n }\n\n handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n emitEvent(this, 'kemet-checkbox-change', this);\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-checkbox-focused', false);\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-checkbox-focused', true);\n }\n\n handleChange() {\n this.value = this.checked;\n\n if (this.input.checkValidity()) {\n this.status = 'standard';\n }\n }\n\n makeMessage() {\n if (this.status === 'error' \|\| this.status === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n makeCheckMark() {\n if (this.checked) {\n return html`\n <span part=\"mark\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n `;\n }\n\n if (!this.checked && this.indeterminate) {\n return html`\n <span part=\"mark\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n `;\n }\n\n return null;\n }\n\n checkValidity() {\n return this.input.checkValidity();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-checkbox': KemetCheckbox\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-checkbox.js","sourceRoot":"","sources":["../../../src/components/kemet-checkbox/kemet-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-checkbox\n * @summary An enhanced checkbox.\n \n @prop {string} label - Label text for the checkbox\n * @prop {boolean} checked - Determines if the checkbox is selected\n * @prop {boolean} indeterminate - An indeterminate selection status\n * @prop {string} name - Name of the checkbox\n * @prop {string} value - Value of the checkbox\n * @prop {boolean} disabled - Determines if a checkbox is disabled\n * @prop {boolean} required - Determines if a checkbox is required\n * @prop {boolean} focused - Is true when the checkbox is focused\n * @prop {boolean} rounded - Gives the checkbox rounded edges\n * @prop {boolean} filled - Fills the checkbox with color\n * @prop {string} status - The status of the checkbox\n * @prop {string} message - Message associated with checkbox status\n \n @csspart label - The label element.\n * @csspart text - The label's text.\n * @csspart mark - The icon of the check mark.\n \n @cssproperty --kemet-checkbox-size - The width and height of the checkbox.\n * @cssproperty --kemet-checkbox-color - The color of the checkbox mark.\n * @cssproperty --kemet-checkbox-border - The border of the checkbox.\n * @cssproperty --kemet-checkbox-border-radius - The border radius of the checkbox.\n * @cssproperty --kemet-checkbox-filled-color - The filled color of the checkbox mark.\n * @cssproperty --kemet-checkbox-filled-background-color - The filled background color.\n \n @event kemet-checkbox-change - Fires when the state of the checkbox changes\n * @event kemet-checkbox-focused - Fires when the checkbox loses or receives focus\n \n /\n\n@customElement('kemet-checkbox')\nexport default class KemetCheckbox extends LitElement {\n /** @internal /\n formSubmitController: FormSubmitController;\n\n static styles = [stylesBase];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean;\n\n @property({ type: Boolean, reflect: true })\n indeterminate: boolean;\n\n @property({ type: String })\n name: string = 'checkbox';\n\n @property({ type: Boolean })\n value: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n required: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean = false;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: String })\n message: string;\n\n @query('input')\n input: HTMLInputElement;\n\n constructor() {\n super();\n\n /* @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${() => this.handleClick()}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n @change=${() => this.handleChange()}\n />\n <button part=\"checkbox\" aria-label=${this.label}>\n ${this.makeCheckMark()}\n </button>\n <span part=\"text\">${this.label}</span>\n </label>\n ${this.makeMessage()}\n `;\n }\n\n click() {\n this.input.click();\n }\n\n handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n emitEvent(this, 'kemet-checkbox-change', this);\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-checkbox-focused', false);\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-checkbox-focused', true);\n }\n\n handleChange() {\n this.value = this.checked;\n\n if (this.input.checkValidity()) {\n this.status = 'standard';\n }\n }\n\n makeMessage() {\n if (this.status === 'error' \|\| this.status === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n makeCheckMark() {\n if (this.checked) {\n return html`\n <span part=\"mark\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n `;\n }\n\n if (!this.checked && this.indeterminate) {\n return html`\n <span part=\"mark\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n `;\n }\n\n return null;\n }\n\n checkValidity() {\n return this.input.checkValidity();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-checkbox': KemetCheckbox\n }\n}\n"]}

package/dist/components/kemet-checkbox/spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './kemet-checkbox';

package/dist/components/kemet-checkbox/spec.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import './kemet-checkbox';
+describe('Checkbox', () => {
+    const templates = {
+        default: html `<kemet-checkbox label="Label"></kemet-checkbox>`,
+        error: html `<kemet-checkbox label="Label" status="error" indeterminate message="Message"></kemet-checkbox>`,
+    };
+    it('should check the box when clicked', async () => {
+        render(templates.default, document.body);
+        const checkbox = document.querySelector('kemet-checkbox');
+        await waitFor(async () => {
+            const label = checkbox.shadowRoot.querySelector('label');
+            const input = checkbox.shadowRoot.querySelector('input');
+            await userEvent.click(label);
+            expect(checkbox.checked).toBe(true);
+            fireEvent.blur(input);
+            checkbox.checkValidity();
+        });
+    });
+    it('should check the box when click method is called', async () => {
+        render(templates.default, document.body);
+        const checkbox = document.querySelector('kemet-checkbox');
+        checkbox.click();
+        expect(checkbox.checked).toBe(false);
+    });
+    it('should check the box when click method is called', async () => {
+        render(templates.error, document.body);
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-checkbox/spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-checkbox/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,kBAAkB,CAAC;AAE1B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA,iDAAiD;QAC9D,KAAK,EAAE,IAAI,CAAA,gGAAgG;KAC5G,CAAC;IAEF,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAE1D,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,QAAQ,CAAC,aAAa,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1D,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport './kemet-checkbox';\n\ndescribe('Checkbox', () => {\n const templates = {\n default: html`<kemet-checkbox label=\"Label\"></kemet-checkbox>`,\n error: html`<kemet-checkbox label=\"Label\" status=\"error\" indeterminate message=\"Message\"></kemet-checkbox>`,\n };\n\n it('should check the box when clicked', async () => {\n render(templates.default, document.body);\n const checkbox = document.querySelector('kemet-checkbox');\n\n await waitFor(async () => {\n const label = checkbox.shadowRoot.querySelector('label');\n const input = checkbox.shadowRoot.querySelector('input');\n await userEvent.click(label);\n expect(checkbox.checked).toBe(true);\n fireEvent.blur(input);\n checkbox.checkValidity();\n });\n });\n\n it('should check the box when click method is called', async () => {\n render(templates.default, document.body);\n const checkbox = document.querySelector('kemet-checkbox');\n checkbox.click();\n expect(checkbox.checked).toBe(false);\n });\n\n it('should check the box when click method is called', async () => {\n render(templates.error, document.body);\n });\n});\n"]}

package/dist/components/kemet-checkbox/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
 export interface KemetCheckboxInterface extends HTMLElement {
     label?: string;
     checked?: boolean;

package/dist/components/kemet-combo/docs/stories.d.ts CHANGED Viewed

@@ -7,5 +7,5 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;

package/dist/components/kemet-combo/kemet-combo.d.ts CHANGED Viewed

@@ -39,6 +39,7 @@ export default class KemetCombo extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     makeOptions(): import("lit-html").TemplateResult<1>[];
     handleInput(event: CustomEvent): void;
+    handleFocus(): void;
     handleSelection(event: KeyboardEvent): void;
     handleOptionKeyDown(event: KeyboardEvent): void;
     handleInputKeyDown(event: KeyboardEvent): void;

package/dist/components/kemet-combo/kemet-combo.js CHANGED Viewed

@@ -43,6 +43,7 @@ let KemetCombo = class KemetCombo extends LitElement {
         this.slug = this.field.slug || 'slug';
         // events listeners
         this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
+        this.input.addEventListener('kemet-multi-input-focus', this.handleFocus.bind(this));
         this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));
     }
     render() {
@@ -83,6 +84,10 @@ let KemetCombo = class KemetCombo extends LitElement {
         this.makeOptions();
         this.show = event.detail.length > 0;
     }
+    handleFocus() {
+        this.makeOptions();
+        this.show = true;
+    }
     handleSelection(event) {
         const target = event.target;
         this.input.value = target.innerText;

package/dist/components/kemet-combo/kemet-combo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-combo.js","sourceRoot":"","sources":["../../../src/components/kemet-combo/kemet-combo.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;~~AAGH~~,~~IAAqB~~,UAAU,~~GAA/B~~,~~MAAqB~~,UAAW,SAAQ,UAAU;~~IAAlD~~;;~~QAOE~~,YAAO,GAAa,EAAE,CAAC;~~IAiIzB~~,CAAC;~~IAnHC~~,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAExD,qBAAqB;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC;QAEtC,mBAAmB;QACnB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;IAClF,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,IAAI;yBACR,IAAI,CAAC,IAAI;;cAEpB,IAAI,CAAC,IAAI;sBACD,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;8CAEO,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,IAAI;YACnE,IAAI,CAAC,WAAW,EAAE;;;KAGzB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,EAAE;~~YACd~~,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACxC,MAAM,CAAC,EAAE,WAAC,OAAA,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA,EAAA,CAC/E,CAAC;YAEF,OAAO,IAAI,CAAC,eAAe,CAAC,GAAG,CAC7B,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;kBACb,IAAI,CAAC,IAAI,WAAW,KAAK;;;;qBAItB,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;uBACnD,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;;cAElE,MAAM;gBACJ,CACT,CAAC;~~SACH~~;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IACtC,CAAC;IAED,eAAe,CAAC,KAAoB;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE;YACvC,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,MAAM,CAAC,SAAS;YACtB,EAAE,EAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;SAC9B,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB,CAAC,KAAoB;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;~~YAC9B~~,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAiC,CAAC;YAEtD,IAAI,IAAI,EAAE;~~gBACR~~,IAAI,CAAC,KAAK,EAAE,CAAC;~~aACd~~;iBAAM;~~gBACL~~,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;~~aAC7C~~;~~SACF~~;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;~~YAC5B~~,MAAM,QAAQ,GAAG,MAAM,CAAC,sBAAqC,CAAC;YAC9D,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAC;YAEhF,IAAI,QAAQ,EAAE;~~gBACZ~~,QAAQ,CAAC,KAAK,EAAE,CAAC;~~aAClB~~;iBAAM;~~gBACL~~,SAAS,CAAC,KAAK,EAAE,CAAC;~~aACnB~~;~~SACF~~;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;~~YACnD~~,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;~~SACpB~~;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;~~YACpD~~,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;~~SAC7B~~;IACH,CAAC;IAED,kBAAkB,CAAC,KAAoB;QACrC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;~~YAC9B~~,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;~~SAC7C~~;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;~~YAC3B~~,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;~~SACnB~~;IACH,CAAC~~;CACF~~,~~CAAA;AAvIQ,~~iBAAM,GAAG,CAAC,UAAU,CAAC,~~CAAC~~;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC7B;AAGd;IADC,KAAK,EAAE;mDACkB;AAG1B;IADC,KAAK,EAAE;yCACU;AAGlB;IADC,KAAK,EAAE;yCACgB;AAnBL,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,~~CAwI9B~~;~~eAxIoB~~,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport type KemetField from '../kemet-field/kemet-field';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-combo\n * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.\n \n @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.\n * @prop {array} options - An array of items listed for the combo box\n * @prop {boolean} show - Controls the display of the combo box\n \n @csspart combobox - The combo's container element.\n * @csspart listbox - The list element in the combo.\n \n @cssproperty --kemet-combo-width - The width of the combo box.\n * @cssproperty --kemet-combo-margin - The margins on the combo box.\n * @cssproperty --kemet-combo-max-height - The max height of the combo box.\n * @cssproperty --kemet-combo-border - The border of the combo box.\n * @cssproperty --kemet-combo-border-radius - The border radius of the combo box.\n * @cssproperty --kemet-combo-background-color - The background color of the combo box.\n * @cssproperty --kemet-combo-shadow - The shadow of the combo box.\n * @cssproperty --kemet-combo-hover-color - The hover item's text color.\n * @cssproperty --kemet-combo-hover-background-color - The hover item's background color.\n \n @event kemet-combo-selection - Fires when a selection has been made\n \n /\n\n@customElement('kemet-combo')\nexport default class KemetCombo extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: String })\n slug: string;\n\n @property({ type: Array })\n options: string[] = [];\n\n @property({ type: Boolean, reflect: true })\n show: boolean;\n\n @state()\n filteredOptions: string[];\n\n @state()\n field: KemetField;\n\n @state()\n input: HTMLInputElement;\n\n firstUpdated() {\n // standard properties\n this.field = this.closest('kemet-field');\n this.input = this.field.querySelector('[slot=\"input\"]');\n\n // managed properties\n this.slug = this.field.slug \|\| 'slug';\n\n // events listeners\n this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));\n }\n\n render() {\n return html`\n <div\n role=\"combobox\"\n part=\"combobox\"\n aria-expanded=${this.show}\n aria-controls=\"${this.slug}-listbox\"\n aria-haspopup=\"listbox\"\n id=\"${this.slug}-combobox\"\n aria-label=\"${this.field?.label}\"\n >\n <ul role=\"listbox\" aria-labelledby=\"${this.slug}-label\" id=\"${this.slug}-listbox\" part=\"listbox\">\n ${this.makeOptions()}\n </ul>\n </div>\n `;\n }\n\n makeOptions() {\n if (this.input) {\n this.filteredOptions = this.options.filter(\n option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,\n );\n\n return this.filteredOptions.map(\n (option, index) => html`<li\n id=\"${this.slug}-option-${index}\"\n role=\"option\"\n tabindex=\"0\"\n aria-selected=\"false\"\n @click=${(event: KeyboardEvent) => this.handleSelection(event)}\n @keydown=${(event: KeyboardEvent) => this.handleOptionKeyDown(event)}\n >\n ${option}\n </li>`,\n );\n }\n\n return null;\n }\n\n handleInput(event: CustomEvent) {\n this.makeOptions();\n this.show = event.detail.length > 0;\n }\n\n handleSelection(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n this.input.value = target.innerText;\n this.show = false;\n\n emitEvent(this, 'kemet-combo-selection', {\n element: target,\n text: target.innerText,\n id: target.getAttribute('id'),\n });\n }\n\n handleOptionKeyDown(event: KeyboardEvent) {\n event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (event.code === 'ArrowDown') {\n const next = target.nextElementSibling as HTMLElement;\n\n if (next) {\n next.focus();\n } else {\n this.shadowRoot.querySelector('li').focus();\n }\n }\n\n if (event.code === 'ArrowUp') {\n const previous = target.previousElementSibling as HTMLElement;\n const lastChild = this.shadowRoot.querySelector('li:last-child') as HTMLElement;\n\n if (previous) {\n previous.focus();\n } else {\n lastChild.focus();\n }\n }\n\n if (event.code === 'Escape' \|\| event.code === 'Tab') {\n this.show = false;\n this.input.focus();\n }\n\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.handleSelection(event);\n }\n }\n\n handleInputKeyDown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown') {\n this.shadowRoot.querySelector('li').focus();\n }\n\n if (event.code === 'Escape') {\n this.show = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-combo': KemetCombo\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-combo.js","sourceRoot":"","sources":["../../../src/components/kemet-combo/kemet-combo.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport type KemetField from '../kemet-field/kemet-field';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-combo\n * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.\n \n @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.\n * @prop {array} options - An array of items listed for the combo box\n * @prop {boolean} show - Controls the display of the combo box\n \n @csspart combobox - The combo's container element.\n * @csspart listbox - The list element in the combo.\n \n @cssproperty --kemet-combo-width - The width of the combo box.\n * @cssproperty --kemet-combo-margin - The margins on the combo box.\n * @cssproperty --kemet-combo-max-height - The max height of the combo box.\n * @cssproperty --kemet-combo-border - The border of the combo box.\n * @cssproperty --kemet-combo-border-radius - The border radius of the combo box.\n * @cssproperty --kemet-combo-background-color - The background color of the combo box.\n * @cssproperty --kemet-combo-shadow - The shadow of the combo box.\n * @cssproperty --kemet-combo-hover-color - The hover item's text color.\n * @cssproperty --kemet-combo-hover-background-color - The hover item's background color.\n \n @event kemet-combo-selection - Fires when a selection has been made\n \n /\n\n@customElement('kemet-combo')\nexport default class KemetCombo extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: String })\n slug: string;\n\n @property({ type: Array })\n options: string[] = [];\n\n @property({ type: Boolean, reflect: true })\n show: boolean;\n\n @state()\n filteredOptions: string[];\n\n @state()\n field: KemetField;\n\n @state()\n input: HTMLInputElement;\n\n firstUpdated() {\n // standard properties\n this.field = this.closest('kemet-field');\n this.input = this.field.querySelector('[slot=\"input\"]');\n\n // managed properties\n this.slug = this.field.slug \|\| 'slug';\n\n // events listeners\n this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n this.input.addEventListener('kemet-multi-input-focus', this.handleFocus.bind(this));\n this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));\n }\n\n render() {\n return html`\n <div\n role=\"combobox\"\n part=\"combobox\"\n aria-expanded=${this.show}\n aria-controls=\"${this.slug}-listbox\"\n aria-haspopup=\"listbox\"\n id=\"${this.slug}-combobox\"\n aria-label=\"${this.field?.label}\"\n >\n <ul role=\"listbox\" aria-labelledby=\"${this.slug}-label\" id=\"${this.slug}-listbox\" part=\"listbox\">\n ${this.makeOptions()}\n </ul>\n </div>\n `;\n }\n\n makeOptions() {\n if (this.input) {\n this.filteredOptions = this.options.filter(\n option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,\n );\n\n return this.filteredOptions.map(\n (option, index) => html`<li\n id=\"${this.slug}-option-${index}\"\n role=\"option\"\n tabindex=\"0\"\n aria-selected=\"false\"\n @click=${(event: KeyboardEvent) => this.handleSelection(event)}\n @keydown=${(event: KeyboardEvent) => this.handleOptionKeyDown(event)}\n >\n ${option}\n </li>`,\n );\n }\n\n return null;\n }\n\n handleInput(event: CustomEvent) {\n this.makeOptions();\n this.show = event.detail.length > 0;\n }\n\n handleFocus() {\n this.makeOptions();\n this.show = true;\n }\n\n handleSelection(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n this.input.value = target.innerText;\n this.show = false;\n\n emitEvent(this, 'kemet-combo-selection', {\n element: target,\n text: target.innerText,\n id: target.getAttribute('id'),\n });\n }\n\n handleOptionKeyDown(event: KeyboardEvent) {\n event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (event.code === 'ArrowDown') {\n const next = target.nextElementSibling as HTMLElement;\n\n if (next) {\n next.focus();\n } else {\n this.shadowRoot.querySelector('li').focus();\n }\n }\n\n if (event.code === 'ArrowUp') {\n const previous = target.previousElementSibling as HTMLElement;\n const lastChild = this.shadowRoot.querySelector('li:last-child') as HTMLElement;\n\n if (previous) {\n previous.focus();\n } else {\n lastChild.focus();\n }\n }\n\n if (event.code === 'Escape' \|\| event.code === 'Tab') {\n this.show = false;\n this.input.focus();\n }\n\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.handleSelection(event);\n }\n }\n\n handleInputKeyDown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown') {\n this.shadowRoot.querySelector('li').focus();\n }\n\n if (event.code === 'Escape') {\n this.show = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-combo': KemetCombo\n }\n}\n"]}

package/dist/components/kemet-combo/spec.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import './kemet-combo';
+import '../kemet-field/kemet-field';
+import '../kemet-input/kemet-input';

package/dist/components/kemet-combo/spec.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { html, render } from 'lit';
+import { Key } from 'webdriverio';
+import { expect } from '@wdio/globals';
+import { waitFor } from '@testing-library/dom';
+import './kemet-combo';
+import '../kemet-field/kemet-field';
+import '../kemet-input/kemet-input';
+import userEvent from '@testing-library/user-event';
+describe('Combo', () => {
+    const options = ['Item 1', 'Item 2', 'Item 3'];
+    const templates = {
+        default: html `
+      <kemet-field label="Combo">
+        <kemet-input slot="input" name="input"></kemet-input>
+        <kemet-combo slot="component" .options=${options}></kemet-combo>
+      </kemet-field>
+    `,
+    };
+    it('selects from combo list box', async () => {
+        render(templates.default, document.body);
+        await waitFor(async () => {
+            const combo = document.body.querySelector('kemet-combo');
+            const input = document.body.querySelector('kemet-input').shadowRoot.querySelector('input');
+            await userEvent.type(input, 'Item');
+            const listboxItem = combo.shadowRoot.querySelector('li');
+            await userEvent.click(listboxItem);
+            expect(input.value).toBe('Item 1');
+        });
+    });
+    it('selects from combo list box using a keyboard', async () => {
+        render(templates.default, document.body);
+        await waitFor(async () => {
+            const combo = document.body.querySelector('kemet-combo');
+            const input = document.body.querySelector('kemet-input').shadowRoot.querySelector('input');
+            combo.show = true;
+            await browser.keys([Key.Tab]);
+            await userEvent.keyboard('{ArrowDown}');
+            await userEvent.keyboard('{ArrowDown}');
+            await userEvent.keyboard('{ArrowDown}');
+            await userEvent.keyboard('{ArrowUp}');
+            await userEvent.keyboard('{Enter}');
+            expect(input.value).toBe('Item 1');
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-combo/spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-combo/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,eAAe,CAAC;AACvB,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAE/C,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;iDAGgC,OAAO;;KAEnD;KACF,CAAC;IAEF,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3F,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACpC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzD,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACnC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3F,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAC9B,MAAM,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YACxC,MAAM,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YACxC,MAAM,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YACxC,MAAM,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;YACtC,MAAM,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { Key } from 'webdriverio';\nimport { expect } from '@wdio/globals';\nimport { waitFor } from '@testing-library/dom';\n\nimport './kemet-combo';\nimport '../kemet-field/kemet-field';\nimport '../kemet-input/kemet-input';\nimport userEvent from '@testing-library/user-event';\n\ndescribe('Combo', () => {\n const options = ['Item 1', 'Item 2', 'Item 3'];\n\n const templates = {\n default: html`\n <kemet-field label=\"Combo\">\n <kemet-input slot=\"input\" name=\"input\"></kemet-input>\n <kemet-combo slot=\"component\" .options=${options}></kemet-combo>\n </kemet-field>\n `,\n };\n\n it('selects from combo list box', async () => {\n render(templates.default, document.body);\n await waitFor(async () => {\n const combo = document.body.querySelector('kemet-combo');\n const input = document.body.querySelector('kemet-input').shadowRoot.querySelector('input');\n await userEvent.type(input, 'Item');\n const listboxItem = combo.shadowRoot.querySelector('li');\n await userEvent.click(listboxItem);\n expect(input.value).toBe('Item 1');\n });\n });\n\n it('selects from combo list box using a keyboard', async () => {\n render(templates.default, document.body);\n await waitFor(async () => {\n const combo = document.body.querySelector('kemet-combo');\n const input = document.body.querySelector('kemet-input').shadowRoot.querySelector('input');\n combo.show = true;\n await browser.keys([Key.Tab]);\n await userEvent.keyboard('{ArrowDown}');\n await userEvent.keyboard('{ArrowDown}');\n await userEvent.keyboard('{ArrowDown}');\n await userEvent.keyboard('{ArrowUp}');\n await userEvent.keyboard('{Enter}');\n expect(input.value).toBe('Item 1');\n });\n });\n});\n"]}

package/dist/components/kemet-count/docs/stories.d.ts CHANGED Viewed

@@ -7,5 +7,5 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;

package/dist/components/kemet-count/kemet-count.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-count.js","sourceRoot":"","sources":["../../../src/components/kemet-count/kemet-count.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAKxD;;;;;;;;;;;;;;;;GAgBG;~~AAGH~~,~~IAAqB~~,UAAU,~~GAA/B~~,~~MAAqB~~,UAAW,SAAQ,UAAU;IAmChD,YAAY;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAE5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAEhD,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAC,KAAkB,EAAE,EAAE;YACtE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YAE3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;YAElD,IAAI,aAAa,EAAE;~~gBACjB~~,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE;~~oBACtB~~,6CAA6C;oBAE7C,IAAI,IAAI,CAAC,mBAAmB,EAAE;~~wBAC5B~~,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,OAAO,CAAC;wBAChC,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;wBAE9B,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE;4BACpC,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,aAAa,CAAC,QAAQ;4BAChC,OAAO,EAAE,IAAI,CAAC,SAAS;yBACxB,CAAC,CAAC;~~qBACJ~~;~~iBACF~~;qBAAM;~~oBACL~~,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;oBACnC,aAAa,CAAC,aAAa,EAAE,CAAC;oBAE9B,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE;wBACpC,MAAM,EAAE,UAAU;wBAClB,QAAQ,EAAE,aAAa,CAAC,QAAQ;wBAChC,OAAO,EAAE,IAAI,CAAC,SAAS;qBACxB,CAAC,CAAC;~~iBACJ~~;~~aACF~~;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;IACjD,CAAC~~;CACF~~,~~CAAA;AA/EQ,~~iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;CACF,~~CAAC~~;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;uDAClC;AAG7B;IADC,KAAK,EAAE;yCACmB;AAG3B;IADC,KAAK,EAAE;6CACgD;AAGxD;IADC,KAAK,EAAE;yCACgB;AAGxB;IADC,KAAK,EAAE;4CACsB;AAjCX,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CAgF9B;eAhFoB,UAAU","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n \n @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n \n @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n \n @event kemet-count-status - Fires when there's a change in status.\n \n /\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n font-size: var(--kemet-count-font-size, 90%);\n margin-top: 0.8rem;\n }\n `,\n ];\n\n @property({ type: String })\n message: string;\n\n @property({ type: Number })\n remaining: number;\n\n @property({ type: Number })\n limit: number;\n\n @property({ type: Boolean, attribute: 'validate-immediately' })\n validateImmediately: boolean;\n\n @state()\n field: KemetFieldInterface;\n\n @state()\n inputSlot: KemetInputInterface \| KemetTextareaInterface;\n\n @state()\n input: HTMLInputElement;\n\n @state()\n textarea: HTMLTextAreaElement;\n\n firstUpdated() {\n this.field = this.closest('kemet-field');\n this.inputSlot = this.field.querySelector('[slot=\"input\"]');\n\n this.remaining = this.limit - this.field.length;\n\n this.field.addEventListener('kemet-field-input', (event: CustomEvent) => {\n this.remaining = this.limit - event.detail;\n\n const nativeElement = this.input \|\| this.textarea;\n\n if (nativeElement) {\n if (this.remaining < 0) {\n // nativeElement.validity.passedLimit = true;\n\n if (this.validateImmediately) {\n this.inputSlot.status = 'error';\n this.inputSlot.invalid = true;\n\n emitEvent(this, 'kemet-count-status', {\n status: 'error',\n validity: nativeElement.validity,\n element: this.inputSlot,\n });\n }\n } else {\n this.inputSlot.status = 'standard';\n nativeElement.checkValidity();\n\n emitEvent(this, 'kemet-count-status', {\n status: 'standard',\n validity: nativeElement.validity,\n element: this.inputSlot,\n });\n }\n }\n });\n\n this.input = this.inputSlot.shadowRoot.querySelector('input');\n this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');\n }\n\n render() {\n return html`${this.remaining} ${this.message}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-count': KemetCount\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-count.js","sourceRoot":"","sources":["../../../src/components/kemet-count/kemet-count.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n \n @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n \n @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n \n @event kemet-count-status - Fires when there's a change in status.\n \n /\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n font-size: var(--kemet-count-font-size, 90%);\n margin-top: 0.8rem;\n }\n `,\n ];\n\n @property({ type: String })\n message: string;\n\n @property({ type: Number })\n remaining: number;\n\n @property({ type: Number })\n limit: number;\n\n @property({ type: Boolean, attribute: 'validate-immediately' })\n validateImmediately: boolean;\n\n @state()\n field: KemetFieldInterface;\n\n @state()\n inputSlot: KemetInputInterface \| KemetTextareaInterface;\n\n @state()\n input: HTMLInputElement;\n\n @state()\n textarea: HTMLTextAreaElement;\n\n firstUpdated() {\n this.field = this.closest('kemet-field');\n this.inputSlot = this.field.querySelector('[slot=\"input\"]');\n\n this.remaining = this.limit - this.field.length;\n\n this.field.addEventListener('kemet-field-input', (event: CustomEvent) => {\n this.remaining = this.limit - event.detail;\n\n const nativeElement = this.input \|\| this.textarea;\n\n if (nativeElement) {\n if (this.remaining < 0) {\n // nativeElement.validity.passedLimit = true;\n\n if (this.validateImmediately) {\n this.inputSlot.status = 'error';\n this.inputSlot.invalid = true;\n\n emitEvent(this, 'kemet-count-status', {\n status: 'error',\n validity: nativeElement.validity,\n element: this.inputSlot,\n });\n }\n } else {\n this.inputSlot.status = 'standard';\n nativeElement.checkValidity();\n\n emitEvent(this, 'kemet-count-status', {\n status: 'standard',\n validity: nativeElement.validity,\n element: this.inputSlot,\n });\n }\n }\n });\n\n this.input = this.inputSlot.shadowRoot.querySelector('input');\n this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');\n }\n\n render() {\n return html`${this.remaining} ${this.message}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-count': KemetCount\n }\n}\n"]}

package/dist/components/kemet-count/spec.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import '../kemet-input/kemet-input';
+import '../kemet-textarea/kemet-textarea';
+import '../kemet-field/kemet-field';
+import './kemet-count';

package/dist/components/kemet-count/spec.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/dom';
+import '../kemet-input/kemet-input';
+import '../kemet-textarea/kemet-textarea';
+import '../kemet-field/kemet-field';
+import './kemet-count';
+describe('Field', () => {
+    const templates = {
+        default: html `
+      <kemet-field>
+        <kemet-input slot="input" name="input"></kemet-input>
+        <kemet-count slot="component" message="characters remaining." limit="6" validate-immediately></kemet-count>
+      </kemet-field>
+    `,
+        textarea: html `
+      <kemet-field>
+        <kemet-textarea slot="input" name="textarea"></kemet-textarea>
+        <kemet-count slot="component" message="characters remaining." limit="6" validate-immediately></kemet-count>
+      </kemet-field>
+    `,
+    };
+    it('should count characters remaining', async () => {
+        render(templates.default, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        const kemetCount = document.querySelector('kemet-count');
+        await waitFor(async () => {
+            const input = kemetInput.shadowRoot.querySelector('input');
+            await userEvent.type(input, 'abcdefgh');
+            expect(kemetCount.remaining).toBe(-2);
+        });
+    });
+    it('should count characters remaining in a textarea', async () => {
+        render(templates.textarea, document.body);
+        const kemetTextarea = document.querySelector('kemet-textarea');
+        const kemetCount = document.querySelector('kemet-count');
+        await waitFor(async () => {
+            const textarea = kemetTextarea.shadowRoot.querySelector('textarea');
+            await userEvent.type(textarea, 'abcdefgh');
+            expect(kemetCount.remaining).toBe(-2);
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-count/spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-count/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,eAAe,CAAC;AAEvB,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;;;KAKZ;QACD,QAAQ,EAAE,IAAI,CAAA;;;;;KAKb;KACF,CAAC;IAEF,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACzD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3D,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YACxC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC/D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,QAAQ,GAAG,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACpE,MAAM,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC3C,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { waitFor } from '@testing-library/dom';\n\nimport '../kemet-input/kemet-input';\nimport '../kemet-textarea/kemet-textarea';\nimport '../kemet-field/kemet-field';\nimport './kemet-count';\n\ndescribe('Field', () => {\n const templates = {\n default: html`\n <kemet-field>\n <kemet-input slot=\"input\" name=\"input\"></kemet-input>\n <kemet-count slot=\"component\" message=\"characters remaining.\" limit=\"6\" validate-immediately></kemet-count>\n </kemet-field>\n `,\n textarea: html`\n <kemet-field>\n <kemet-textarea slot=\"input\" name=\"textarea\"></kemet-textarea>\n <kemet-count slot=\"component\" message=\"characters remaining.\" limit=\"6\" validate-immediately></kemet-count>\n </kemet-field>\n `,\n };\n\n it('should count characters remaining', async () => {\n render(templates.default, document.body);\n const kemetInput = document.querySelector('kemet-input');\n const kemetCount = document.querySelector('kemet-count');\n\n await waitFor(async () => {\n const input = kemetInput.shadowRoot.querySelector('input');\n await userEvent.type(input, 'abcdefgh');\n expect(kemetCount.remaining).toBe(-2);\n });\n });\n\n it('should count characters remaining in a textarea', async () => {\n render(templates.textarea, document.body);\n const kemetTextarea = document.querySelector('kemet-textarea');\n const kemetCount = document.querySelector('kemet-count');\n\n await waitFor(async () => {\n const textarea = kemetTextarea.shadowRoot.querySelector('textarea');\n await userEvent.type(textarea, 'abcdefgh');\n expect(kemetCount.remaining).toBe(-2);\n });\n });\n});\n"]}

package/dist/components/kemet-draggable/docs/stories.d.ts CHANGED Viewed

@@ -6,5 +6,5 @@ import '../../kemet-tabs/kemet-tab-panel';
 import '../../kemet-button/kemet-button';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;

package/dist/components/kemet-draggable/kemet-draggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-draggable.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/kemet-draggable.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EACN,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;~~AAGH~~,~~IAAqB~~,cAAc,~~GAAnC~~,~~MAAqB~~,cAAe,SAAQ,UAAU;~~IAAtD~~;;~~QAeE~~,QAAG,GAAW,MAAM,CAAC;QAGrB,SAAI,GAAW,MAAM,CAAC;QAGtB,YAAO,GAAY,KAAK,CAAC;IA4G3B,CAAC;IA9EC,YAAY;QACV,sBAAsB;QACtB,gBAAgB;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAEpE,IAAI,aAAa,EAAE;~~YACjB~~,IAAI,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;~~SAChC~~;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;~~YAChB~~,IAAI,CAAC,cAAc,EAAE,CAAC;~~SACvB~~;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;uCACwB,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,GAAG,UAAU,IAAI,CAAC,IAAI;;;KAGxH,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,KAAiB;QACzB,IAAI,KAAK,EAAE;~~YACT~~,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;~~SAChC~~;QAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAEvD,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,CAAC,KAAiB;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAE/B,IAAI,IAAI,CAAC,gBAAgB,EAAE;~~YACzB~~,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;YACnE,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;~~SACtE~~;IACH,CAAC;IAED,QAAQ;QACN,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1D,IAAI,IAAI,CAAC,MAAM,EAAE;~~YACf~~,MAAM,aAAa,GAAG;gBACpB,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;YAEF,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;~~SAClE~~;QAED,SAAS,CAAC,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc;;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,MAAA,IAAI,CAAC,gBAAgB,0CAAE,WAAW,IAAI,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,IAAI,CAAC;IACjE,CAAC~~;CACF~~,~~CAAA;AAhIQ,~~qBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;GAQnB,CAAC,~~CAAC~~;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AAIzB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDAC+B;AAIvC;IADC,KAAK,EAAE;+CACY;AAIpB;IADC,KAAK,CAAC,YAAY,CAAC;wDACU;AAjDX,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAiIlC;eAjIoB,cAAc","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-draggable\n * @summary A draggable element with the ability to remember its position.\n \n @prop {string} memory - A unique identifier used to store the element's position in local storage.\n * @prop {string} top - The elements top position in pixels.\n * @prop {string} left - The element's left position in pixels.\n * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.\n \n @event kemet-draggable-start\n * @event kemet-draggable-stop\n \n /\n\n@customElement('kemet-draggable')\nexport default class KemetDraggable extends LitElement {\n static styles = [css`\n :host {\n display: inline-block;\n }\n\n #draggable {\n position: absolute;\n }\n `];\n\n @property({ type: String })\n memory: string;\n\n @property({ type: String })\n top: string = 'auto';\n\n @property({ type: String })\n left: string = 'auto';\n\n @property({ type: Boolean })\n measure: boolean = false;\n\n /** @internal /\n @state()\n position1: number;\n\n /* @internal /\n @state()\n position2: number;\n\n /* @internal /\n @state()\n position3: number;\n\n /* @internal /\n @state()\n position4: number;\n\n /* @internal /\n @state()\n mouseMove: (event: MouseEvent) => void;\n\n /* @internal /\n @state()\n mouseUp: () => void;\n\n /* @internal /\n @query('#draggable')\n draggableElement: HTMLElement;\n\n firstUpdated() {\n // standard properties\n /* @internal */\n this.position1 = 0;\n this.position2 = 0;\n this.position3 = 0;\n this.position4 = 0;\n this.mouseMove = event => this.drag(event);\n this.mouseUp = () => this.stopDrag();\n\n const savedPosition = JSON.parse(localStorage.getItem(this.memory));\n\n if (savedPosition) {\n this.top = savedPosition.top;\n this.left = savedPosition.left;\n }\n\n if (this.measure) {\n this.measureContent();\n }\n }\n\n render() {\n return html`\n <div id=\"draggable\" @mousedown=${(event: MouseEvent) => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n <slot></slot>\n </div>\n `;\n }\n\n startDrag(event: MouseEvent) {\n if (event) {\n event.preventDefault();\n\n this.position3 = event.clientX;\n this.position4 = event.clientY;\n }\n\n document.addEventListener('mouseup', this.mouseUp);\n document.addEventListener('mousemove', this.mouseMove);\n\n emitEvent(this, 'kemet-draggable-start', this);\n }\n\n drag(event: MouseEvent) {\n event.preventDefault();\n\n this.position1 = this.position3 - event.clientX;\n this.position2 = this.position4 - event.clientY;\n this.position3 = event.clientX;\n this.position4 = event.clientY;\n\n if (this.draggableElement) {\n this.top = `${this.draggableElement.offsetTop - this.position2}px`;\n this.left = `${this.draggableElement.offsetLeft - this.position1}px`;\n }\n }\n\n stopDrag() {\n document.removeEventListener('mouseup', this.mouseUp);\n document.removeEventListener('mousemove', this.mouseMove);\n\n if (this.memory) {\n const savedPosition = {\n top: this.top,\n left: this.left,\n };\n\n localStorage.setItem(this.memory, JSON.stringify(savedPosition));\n }\n\n emitEvent(this, 'kemet-draggable-stop', this);\n }\n\n measureContent() {\n this.style.width = `${this.draggableElement?.offsetWidth}px`;\n this.style.height = `${this.draggableElement?.offsetHeight}px`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-draggable': KemetDraggable\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-draggable.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/kemet-draggable.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EACN,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;AAGY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAeb,QAAG,GAAW,MAAM,CAAC;QAGrB,SAAI,GAAW,MAAM,CAAC;QAGtB,YAAO,GAAY,KAAK,CAAC;IA4G3B,CAAC;IA9EC,YAAY;QACV,sBAAsB;QACtB,gBAAgB;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAEpE,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QACjC,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;uCACwB,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,GAAG,UAAU,IAAI,CAAC,IAAI;;;KAGxH,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,KAAiB;QACzB,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QACjC,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAEvD,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,CAAC,KAAiB;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;QAE/B,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;YACnE,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;QACvE,CAAC;IACH,CAAC;IAED,QAAQ;QACN,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1D,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,aAAa,GAAG;gBACpB,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;YAEF,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,SAAS,CAAC,IAAI,EAAE,sBAAsB,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc;;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,MAAA,IAAI,CAAC,gBAAgB,0CAAE,WAAW,IAAI,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,IAAI,CAAC;IACjE,CAAC;;AA/HM,qBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;GAQnB,CAAC,AARW,CAQV;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AAIzB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDACU;AAIlB;IADC,KAAK,EAAE;iDAC+B;AAIvC;IADC,KAAK,EAAE;+CACY;AAIpB;IADC,KAAK,CAAC,YAAY,CAAC;wDACU;AAjDX,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAiIlC;eAjIoB,cAAc","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-draggable\n * @summary A draggable element with the ability to remember its position.\n \n @prop {string} memory - A unique identifier used to store the element's position in local storage.\n * @prop {string} top - The elements top position in pixels.\n * @prop {string} left - The element's left position in pixels.\n * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.\n \n @event kemet-draggable-start\n * @event kemet-draggable-stop\n \n /\n\n@customElement('kemet-draggable')\nexport default class KemetDraggable extends LitElement {\n static styles = [css`\n :host {\n display: inline-block;\n }\n\n #draggable {\n position: absolute;\n }\n `];\n\n @property({ type: String })\n memory: string;\n\n @property({ type: String })\n top: string = 'auto';\n\n @property({ type: String })\n left: string = 'auto';\n\n @property({ type: Boolean })\n measure: boolean = false;\n\n /** @internal /\n @state()\n position1: number;\n\n /* @internal /\n @state()\n position2: number;\n\n /* @internal /\n @state()\n position3: number;\n\n /* @internal /\n @state()\n position4: number;\n\n /* @internal /\n @state()\n mouseMove: (event: MouseEvent) => void;\n\n /* @internal /\n @state()\n mouseUp: () => void;\n\n /* @internal /\n @query('#draggable')\n draggableElement: HTMLElement;\n\n firstUpdated() {\n // standard properties\n /* @internal */\n this.position1 = 0;\n this.position2 = 0;\n this.position3 = 0;\n this.position4 = 0;\n this.mouseMove = event => this.drag(event);\n this.mouseUp = () => this.stopDrag();\n\n const savedPosition = JSON.parse(localStorage.getItem(this.memory));\n\n if (savedPosition) {\n this.top = savedPosition.top;\n this.left = savedPosition.left;\n }\n\n if (this.measure) {\n this.measureContent();\n }\n }\n\n render() {\n return html`\n <div id=\"draggable\" @mousedown=${(event: MouseEvent) => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n <slot></slot>\n </div>\n `;\n }\n\n startDrag(event: MouseEvent) {\n if (event) {\n event.preventDefault();\n\n this.position3 = event.clientX;\n this.position4 = event.clientY;\n }\n\n document.addEventListener('mouseup', this.mouseUp);\n document.addEventListener('mousemove', this.mouseMove);\n\n emitEvent(this, 'kemet-draggable-start', this);\n }\n\n drag(event: MouseEvent) {\n event.preventDefault();\n\n this.position1 = this.position3 - event.clientX;\n this.position2 = this.position4 - event.clientY;\n this.position3 = event.clientX;\n this.position4 = event.clientY;\n\n if (this.draggableElement) {\n this.top = `${this.draggableElement.offsetTop - this.position2}px`;\n this.left = `${this.draggableElement.offsetLeft - this.position1}px`;\n }\n }\n\n stopDrag() {\n document.removeEventListener('mouseup', this.mouseUp);\n document.removeEventListener('mousemove', this.mouseMove);\n\n if (this.memory) {\n const savedPosition = {\n top: this.top,\n left: this.left,\n };\n\n localStorage.setItem(this.memory, JSON.stringify(savedPosition));\n }\n\n emitEvent(this, 'kemet-draggable-stop', this);\n }\n\n measureContent() {\n this.style.width = `${this.draggableElement?.offsetWidth}px`;\n this.style.height = `${this.draggableElement?.offsetHeight}px`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-draggable': KemetDraggable\n }\n}\n"]}