npm - kemet-ui - Versions diffs - 2.0.0 → 2.0.2 - Mend

kemet-ui 2.0.0 → 2.0.2

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 (601) hide show

package/dist/components/kemet-alert/docs/stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;~~AAG1C~~,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\n\nconst meta: Meta = {\n title: 'Components / Alert',\n component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n heading,\n text,\n icon,\n status,\n closable,\n border,\n opened,\n overlay,\n}) => {\n const makeIcon = () => {\n if (icon !== 'none') {\n return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n }\n\n return null;\n };\n\n return html`\n <kemet-alert\n status=${status}\n ?closable=${closable}\n ?opened=${opened}\n border-status=${border}\n overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n ${makeIcon()}\n <strong>${heading}</strong>\n <br />\n ${text}\n </kemet-alert>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n heading: 'This is a heading.',\n text: 'The brown fox jumped over the lazy dog.',\n icon: 'gear',\n status: 'standard',\n closable: false,\n border: 'left',\n opened: true,\n overlay: 'none',\n },\n argTypes: {\n heading: {\n control: { type: 'text' },\n },\n text: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'select' },\n options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n },\n status: {\n control: { type: 'select' },\n options: ['standard', 'primary', 'success', 'warning', 'error'],\n },\n closable: {\n control: { type: 'boolean' },\n },\n border: {\n control: { type: 'select' },\n options: ['none', 'top', 'right', 'bottom', 'left'],\n },\n opened: {\n control: { type: 'boolean' },\n },\n overlay: {\n control: { type: 'select' },\n options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n },\n }\n};\n"]}
1	+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,gBAAgB,CAAC;AAExB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;eAEE,MAAM;kBACH,QAAQ;gBACV,MAAM;sBACA,MAAM;gBACZ,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACzC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7E,QAAQ,EAAE;gBACF,OAAO;;QAEf,IAAI;;GAET,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,OAAO,EAAE,oBAAoB;QAC7B,IAAI,EAAE,yCAAyC;QAC/C,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,EAAE,oBAAoB,CAAC;SAC/E;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;SAChE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SACpD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;SACrG;KACF;CACF,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Alert',\n component: 'kemet-alert',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n heading,\n text,\n icon,\n status,\n closable,\n border,\n opened,\n overlay,\n}) => {\n const makeIcon = () => {\n if (icon !== 'none') {\n return html`<kemet-icon slot=\"icon\" icon=${icon} size=\"24\" ></kemet-icon>`;\n }\n\n return null;\n };\n\n return html`\n <kemet-alert\n status=${status}\n ?closable=${closable}\n ?opened=${opened}\n border-status=${border}\n overlay=${ifDefined(overlay !== 'none' ? overlay : null)}\n kemet-margin=${ifDefined(overlay.indexOf('full') < 0 ? 'tiny:normal' : nothing)}>\n ${makeIcon()}\n <strong>${heading}</strong>\n <br />\n ${text}\n </kemet-alert>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n heading: 'This is a heading.',\n text: 'The brown fox jumped over the lazy dog.',\n icon: 'gear',\n status: 'standard',\n closable: false,\n border: 'left',\n opened: true,\n overlay: 'none',\n },\n argTypes: {\n heading: {\n control: { type: 'text' },\n },\n text: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'select' },\n options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n },\n status: {\n control: { type: 'select' },\n options: ['standard', 'primary', 'success', 'warning', 'error'],\n },\n closable: {\n control: { type: 'boolean' },\n },\n border: {\n control: { type: 'select' },\n options: ['none', 'top', 'right', 'bottom', 'left'],\n },\n opened: {\n control: { type: 'boolean' },\n },\n overlay: {\n control: { type: 'select' },\n options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n },\n }\n};\n"]}

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import '../kemet-avatar';
+import '../kemet-avatars';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';

package/dist/components/kemet-avatar/docs/stories.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-avatar';
+import '../kemet-avatars';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
@@ -15,7 +16,7 @@ const Template = ({ icon, image, circle, rounded, initials, status, }) => html `
     ?rounded=${rounded}
     image="${ifDefined(image !== '' ? image : null)}"
     initials="${ifDefined(initials !== '' ? initials : null)}"
-    kemet-margin="tiny:normal">
+  >
     ${icon !== '' ? html `<kemet-icon icon=${icon} size="48" kemet-margin="tiny:smallest"></kemet-icon>` : null}
     ${status ? html `<kemet-badge slot="status" status="success" kemet-border="all-2 solid white"></kemet-badge>` : null}
   </kemet-avatar>
@@ -23,7 +24,7 @@ const Template = ({ icon, image, circle, rounded, initials, status, }) => html `
 const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
     const avatars = [];
     for (let i = 0; i < numOfAvatars; i += 1) {
-        avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid white"></kemet-avatar>\n`);
+        avatars.push(html `<kemet-avatar circle image="https://via.placeholder.com/64x64" kemet-border="all-4 solid gray1"></kemet-avatar>\n`);
     }
     return html `
     <style>
@@ -31,7 +32,7 @@ const TemplateMultiple = ({ squeeze, numOfAvatars, }) => {
         --kemet-avatars-squeeze: ${squeeze};
       }
     </style>
-    <kemet-avatars kemet-margin="tiny:normal">
+    <kemet-avatars>
       ${avatars}
     </kemet-avatars>
   `;
@@ -68,7 +69,7 @@ export const Standard = {
     }
 };
 export const Multiple = {
-    render: (args) => Template(args),
+    render: (args) => TemplateMultiple(args),
     args: {
         squeeze: '-1.5rem',
         numOfAvatars: 3,

package/dist/components/kemet-avatar/docs/stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-avatar/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;~~AAEzB~~,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;eACL,OAAO;aACT,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;gBACnC,SAAS,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;;MAEtD,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,uDAAuD,CAAC,CAAC,CAAC,IAAI;MACxG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6FAA6F,CAAC,CAAC,CAAC,IAAI;;CAEtH,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,OAAO,EACP,YAAY,GACb,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE;QACxC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,mHAAmH,CAAC,CAAC;KACvI;IAED,OAAO,IAAI,CAAA;;;mCAGsB,OAAO;;;;QAIlC,OAAO;;GAEZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,mCAAmC;QAC1C,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,~~QAAQ~~,CAAC,IAAI,CAAC;~~IACrC~~,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-avatar';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Avatar',\n component: 'kemet-avatar',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n icon,\n image,\n circle,\n rounded,\n initials,\n status,\n}) => html`\n <kemet-avatar\n ?circle=${circle}\n ?rounded=${rounded}\n image=\"${ifDefined(image !== '' ? image : null)}\"\n initials=\"${ifDefined(initials !== '' ? initials : null)}\"\n ~~kemet-margin=\"tiny:normal\"~~>\n ${icon !== '' ? html`<kemet-icon icon=${icon} size=\"48\" kemet-margin=\"tiny:smallest\"></kemet-icon>` : null}\n ${status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n </kemet-avatar>\n`;\n\nconst TemplateMultiple = ({\n squeeze,\n numOfAvatars,\n}) => {\n const avatars = [];\n\n for (let i = 0; i < numOfAvatars; i += 1) {\n avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid ~~white~~\"></kemet-avatar>\\n`);\n }\n\n return html`\n <style>\n kemet-avatars {\n --kemet-avatars-squeeze: ${squeeze};\n }\n </style>\n <kemet-avatars ~~kemet-margin=\"tiny:normal\"~~>\n ${avatars}\n </kemet-avatars>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n circle: true,\n rounded: false,\n image: 'https://via.placeholder.com/64x64',\n initials: 'KU',\n icon: 'person',\n status: false,\n },\n argTypes: {\n circle: {\n control: { type: 'boolean' },\n },\n rounded: {\n control: { type: 'boolean' },\n },\n image: {\n control: { type: 'text' },\n },\n initials: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'text' },\n },\n status: {\n control: { type: 'boolean' },\n },\n }\n};\n\nexport const Multiple: Story = {\n render: (args: any) => ~~Template~~(args),\n args: {\n squeeze: '-1.5rem',\n numOfAvatars: 3,\n },\n argTypes: {\n squeeze: {\n control: { type: 'text' },\n },\n numOfAvatars: {\n control: { type: 'number' },\n },\n }\n};\n"]}
1	+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-avatar/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;eACL,OAAO;aACT,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;gBACnC,SAAS,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;;MAEtD,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,uDAAuD,CAAC,CAAC,CAAC,IAAI;MACxG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6FAA6F,CAAC,CAAC,CAAC,IAAI;;CAEtH,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,OAAO,EACP,YAAY,GACb,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE;QACxC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,mHAAmH,CAAC,CAAC;KACvI;IAED,OAAO,IAAI,CAAA;;;mCAGsB,OAAO;;;;QAIlC,OAAO;;GAEZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,mCAAmC;QAC1C,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;IAC7C,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-avatar';\nimport '../kemet-avatars';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Avatar',\n component: 'kemet-avatar',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n icon,\n image,\n circle,\n rounded,\n initials,\n status,\n}) => html`\n <kemet-avatar\n ?circle=${circle}\n ?rounded=${rounded}\n image=\"${ifDefined(image !== '' ? image : null)}\"\n initials=\"${ifDefined(initials !== '' ? initials : null)}\"\n >\n ${icon !== '' ? html`<kemet-icon icon=${icon} size=\"48\" kemet-margin=\"tiny:smallest\"></kemet-icon>` : null}\n ${status ? html`<kemet-badge slot=\"status\" status=\"success\" kemet-border=\"all-2 solid white\"></kemet-badge>` : null}\n </kemet-avatar>\n`;\n\nconst TemplateMultiple = ({\n squeeze,\n numOfAvatars,\n}) => {\n const avatars = [];\n\n for (let i = 0; i < numOfAvatars; i += 1) {\n avatars.push(html`<kemet-avatar circle image=\"https://via.placeholder.com/64x64\" kemet-border=\"all-4 solid gray1\"></kemet-avatar>\\n`);\n }\n\n return html`\n <style>\n kemet-avatars {\n --kemet-avatars-squeeze: ${squeeze};\n }\n </style>\n <kemet-avatars>\n ${avatars}\n </kemet-avatars>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n circle: true,\n rounded: false,\n image: 'https://via.placeholder.com/64x64',\n initials: 'KU',\n icon: 'person',\n status: false,\n },\n argTypes: {\n circle: {\n control: { type: 'boolean' },\n },\n rounded: {\n control: { type: 'boolean' },\n },\n image: {\n control: { type: 'text' },\n },\n initials: {\n control: { type: 'text' },\n },\n icon: {\n control: { type: 'text' },\n },\n status: {\n control: { type: 'boolean' },\n },\n }\n};\n\nexport const Multiple: Story = {\n render: (args: any) => TemplateMultiple(args),\n args: {\n squeeze: '-1.5rem',\n numOfAvatars: 3,\n },\n argTypes: {\n squeeze: {\n control: { type: 'text' },\n },\n numOfAvatars: {\n control: { type: 'number' },\n },\n }\n};\n"]}

package/dist/components/kemet-card/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-card/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-card';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Card',\n component: 'kemet-card',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n bodyText,\n showHeader,\n showFooter,\n captionText,\n mediaType,\n textColor,\n backgroundColor,\n borderColor,\n cardPadding,\n borderRadius,\n isCentered,\n elevation,\n}) => html`\n <style>\n kemet-card {\n --kemet-card-color: ${textColor};\n --kemet-card-padding: ${cardPadding};\n --kemet-card-border-color: ${borderColor};\n --kemet-card-border-radius: ${borderRadius};\n --kemet-card-background-color: ${backgroundColor};\n }\n </style>\n <kemet-card ?center=${isCentered} kemet-elevation=\"${ifDefined(elevation !== 'none' ? elevation : null)}\">\n ${showHeader ? html`<div slot=\"header\">This is the header.</div>` : null}\n ${showMedia(mediaType)}\n ${captionText !== '' ? html`<div slot=\"caption\">${captionText}</div>` : null}\n ${bodyText}\n ${showFooter ? html`<div slot=\"footer\">This is the footer.</div>` : null}\n </kemet-card>\n`;\n\nconst showMedia = (type) => {\n if (type === 'image') {\n return html`<img slot=\"media\" src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" />`;\n }\n\n if (type === 'avatar') {\n return html`\n <kemet-avatar slot=\"media\" rounded image=\"https://via.placeholder.com/200x200\" label=\"a placeholder\"></kemet-avatar>\n `;\n }\n\n if (type === 'video') {\n return html`\n <video slot=\"media\" controls>\n <source src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n `;\n }\n\n if (type === 'embed') {\n return html`\n <iframe slot=\"media\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5gBqTXctxO8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n `;\n }\n\n return null;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n captionText: 'Caption',\n showHeader: false,\n showFooter: true,\n isCentered: false,\n mediaType: 'image',\n textColor: '#000000',\n borderColor: '#a4a4a4',\n backgroundColor: '#ffffff',\n cardPadding: '1rem',\n borderRadius: '0',\n elevation: 'none',\n },\n argTypes: {\n bodyText: {\n control: { type: 'text' },\n },\n showHeader: {\n control: { type: 'boolean' },\n },\n showFooter: {\n control: { type: 'boolean' },\n },\n isCentered: {\n control: { type: 'boolean' },\n },\n mediaType: {\n control: { type: 'radio' },\n options: ['none', 'image', 'avatar', 'video', 'embed'],\n },\n textColor: {\n control: { type: 'color' },\n },\n borderColor: {\n control: { type: 'color' },\n },\n backgroundColor: {\n control: { type: 'color' },\n },\n cardPadding: {\n control: { type: 'text' },\n },\n borderRadius: {\n control: { type: 'text' },\n },\n elevation: {\n control: { type: 'select' },\n options: ['none', 'layer1', 'layer2', 'layer3', 'layer4', 'layer5', 'layer6', 'inner'],\n },\n }\n};\n"]}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-carousel/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\n\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-carousel';\nimport '../kemet-carousel-link';\nimport '../kemet-carousel-first';\nimport '../kemet-carousel-last';\nimport '../kemet-carousel-next';\nimport '../kemet-carousel-prev';\nimport '../kemet-carousel-slide';\nimport '../kemet-carousel-current';\nimport '../kemet-carousel-total';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Carousel',\n component: 'kemet-carousel',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n numOfSlides = 5,\n toolbar = 'description',\n index = 0,\n inner = false,\n arrows = false,\n options,\n breakpoints,\n}) => {\n const makeSlides = () => {\n const slides = [];\n\n for (let i = 0; i < numOfSlides; i += 1) {\n const slideNumber = i + 1;\n\n slides.push(html`\n <kemet-carousel-slide slot=\"slides\">\n <figure kemet-border=\"all-1 solid gray1\" kemet-margin=\"tiny:none\" kemet-padding=\"tiny:normal\" kemet-elevation=\"layer4\">\n <h3 kemet-margin=\"tiny:none\">Slide ${slideNumber}</h3>\n <img src=\"https://via.placeholder.com/1920x1080\" alt=\"a placeholder\" style=\"max-width:100%\" />\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 ${slideNumber}. </span>\n </kemet-carousel-slide>\n `);\n }\n\n return slides;\n };\n\n const makePrevArrow = () => {\n if (arrows) {\n return html`\n <kemet-carousel-prev slot=\"prev\">\n <kemet-icon icon=\"chevron-left\" size=\"72\"></kemet-icon>\n </kemet-carousel-prev>\n `;\n }\n\n return null;\n };\n\n const makeNextArrow = () => {\n if (arrows) {\n return html`\n <kemet-carousel-next slot=\"next\">\n <kemet-icon icon=\"chevron-right\" size=\"72\"></kemet-icon>\n </kemet-carousel-next>\n `;\n }\n\n return null;\n };\n\n const makePagination = () => {\n if (toolbar === 'pagination') {\n const pages = [];\n\n for (let i = 0; i < numOfSlides; i += 1) {\n pages.push(html`\n <kemet-carousel-link slide=\"${i}\" slot=\"toolbar\">${i + 1}</kemet-carousel-link>\n `);\n }\n\n return html`\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 ${pages}\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 `;\n }\n\n return null;\n };\n\n const makeDescription = () => {\n if (toolbar === 'description') {\n return html`\n <div slot=\"toolbar\" kemet-layout=\"flexrow\" kemet-align=\"middle\" kemet-gutters>\n <div>\n <kemet-carousel-current></kemet-carousel-current>\n  of \n <kemet-carousel-total></kemet-carousel-total>\n : \n <kemet-carousel-information></kemet-carousel-information>\n </div>\n <kemet-carousel-prev kemet-breakpoint=\"tiny:content\">\n <kemet-badge circle><kemet-icon icon=\"chevron-left\"></kemet-icon></kemet-badge>\n </kemet-carousel-prev>\n <kemet-carousel-next kemet-breakpoint=\"tiny:content\">\n <kemet-badge circle><kemet-icon icon=\"chevron-right\"></kemet-icon></kemet-badge>\n </kemet-carousel-next>\n </div>\n `;\n }\n\n return null;\n };\n\n return html`\n <kemet-carousel index=\"${index}\" ?inner=${inner} .options=${options} .breakpoints=${breakpoints}>\n ${makePrevArrow()}\n ${makeSlides()}\n ${makeNextArrow()}\n ${makePagination()}\n ${makeDescription()}\n </kemet-carousel>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n numOfSlides: 5,\n toolbar: 'pagination',\n index: 0,\n inner: false,\n arrows: false,\n options: {\n perView: 1,\n perMove: 1,\n gap: 12,\n slideshow: 0,\n rewind: true,\n center: false,\n },\n breakpoints: {\n 768: {\n perView: 2,\n gap: 24,\n rewind: false,\n },\n 1280: {\n perView: 2.5,\n center: true,\n },\n },\n },\n argTypes: {\n numOfSlides: {\n control: { type: 'number' },\n },\n toolbar: {\n control: { type: 'radio' },\n options: ['none', 'pagination', 'description'],\n },\n index: {\n control: { type: 'number' },\n },\n inner: {\n control: { type: 'boolean' },\n },\n arrows: {\n control: { type: 'boolean' },\n },\n options: {\n control: { type: 'object' },\n },\n breakpoints: {\n control: { type: 'object' },\n },\n }\n};\n"]}

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

@@ -57,18 +57,31 @@ export default class KemetCarousel extends LitElement {
     arrows: boolean;
     options: object;
     breakpoints: object;
+    /** @internal */
     slides: any[];
+    /** @internal */
     links: any[];
+    /** @internal */
     toolbarSlotElement: HTMLElement | null;
+    /** @internal */
     informationElement: HTMLElement | null;
+    /** @internal */
     swipeMove: (event: any) => void;
+    /** @internal */
     handleSlideShow: any;
+    /** @internal */
     startX: number;
+    /** @internal */
     slideWidth: number;
+    /** @internal */
     informationSlot: HTMLElement;
+    /** @internal */
     containerElement: HTMLElement;
+    /** @internal */
     slidesElement: HTMLElement;
+    /** @internal */
     sliderElement: HTMLElement;
+    /** @internal */
     toolbarElement: HTMLElement;
     constructor();
     firstUpdated(): void;

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

@@ -79,7 +79,9 @@ let KemetCarousel = class KemetCarousel extends LitElement {
                 center: true,
             },
         };
+        /** @internal */
         this.slides = [];
+        /** @internal */
         this.links = [];
         // bindings
         this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-carousel.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesCarousel } from './styles';\nimport { KemetCarouselCurrentInterface, KemetCarouselLinkInterface, KemetCarouselSlideInterface } from './types';\n\n/*\n \n * @since 1.1.0\n * @status stable\n \n @tagname kemet-carousel\n * @summary The Carousel allows you to click or swipe through content.\n \n @prop {number} index - The current slide index.\n * @prop {number} total - The total amount of slides.\n * @prop {string} sliderWidth - The width of the slider.\n * @prop {string} sliderTranslateX - The X position of the slider.\n * @prop {boolean} inner - Displays the toolbar inside the carousel container.\n * @prop {boolean} arrows - Determines whether or not to display arrows.\n * @prop {object} options - Default options for the carousel.\n * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.\n \n @event kemet-carousel-change-start - Fires with the a slide has begun to change.\n * @event kemet-carousel-change-finished - Fires when a slide has changed and finished animating\n \n @slot slides - Place the slide elements here.\n * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.\n * @slot prev - A slot for the previous arrow.\n * @slot next - A slot for the next arrow.\n * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.\n \n @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.\n * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.\n * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.\n * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.\n * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.\n * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.\n * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.\n * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.\n * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).\n * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).\n * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.\n * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.\n * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.\n * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.\n \n @csspart container - Contains the slides and toolbar.\n * @csspart slides - Wrapper for the slider.\n * @csspart slider - Contains the slides.\n * @csspart toolbar - Contains the toolbar.\n \n /\n\n@customElement('kemet-carousel')\nexport default class KemetCarousel extends LitElement {\n static styles = [stylesCarousel];\n\n @property({ type: Number, reflect: true })\n index: number = 0;\n\n @property({ type: Number })\n total: number = 0;\n\n @property({ type: String })\n sliderWidth: string = 'auto';\n\n @property({ type: String })\n sliderTranslateX: string = '0';\n\n @property({ type: Boolean, reflect: true })\n inner: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n arrows: boolean = false;\n\n @property({ type: Object })\n options: object = {\n perView: 1,\n perMove: 1,\n gap: 12,\n slideshow: 0,\n rewind: true,\n center: false,\n };\n\n @property({ type: Object })\n breakpoints: object = {\n 768: {\n perView: 2,\n gap: 24,\n rewind: false,\n },\n 1280: {\n perView: 2.5,\n center: true,\n },\n };\n\n\n @state()\n slides: any[] = [];\n\n @state()\n links: any[] = [];\n\n @state()\n toolbarSlotElement: HTMLElement \| null;\n\n @state()\n informationElement: HTMLElement \| null;\n\n @state()\n swipeMove: (event) => void;\n\n @state()\n handleSlideShow: any;\n\n @state()\n startX: number;\n\n @state()\n slideWidth: number;\n\n @state()\n informationSlot: HTMLElement;\n\n\n @query('#container')\n containerElement: HTMLElement;\n\n @query('#slides')\n slidesElement: HTMLElement;\n\n @query('#slider')\n sliderElement: HTMLElement;\n\n @query('#toolbar')\n toolbarElement: HTMLElement;\n\n\n constructor() {\n super();\n\n // bindings\n this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));\n this.addEventListener('kemet-carousel-last', this.handleLast.bind(this));\n this.addEventListener('kemet-carousel-next', this.handleNext.bind(this));\n this.addEventListener('kemet-carousel-prev', this.handlePrev.bind(this));\n this.addEventListener('kemet-carousel-link', this.handleLink.bind(this));\n }\n\n firstUpdated() {\n // elements\n this.toolbarSlotElement = this.querySelector('[slot=\"toolbar\"]');\n this.informationElement = this.querySelector('kemet-carousel-information');\n\n // events\n window.addEventListener('resize', () => {\n this.setSlideSize();\n this.setToolbarSize();\n this.updateIndex(this.index);\n });\n\n this.sliderElement?.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n\n // methods\n this.swipeMove = (event) => {\n event.preventDefault();\n\n const pageX = event.touches ? event.touches[0].pageX : event.pageX;\n const currentSlide = this.slides[this.index];\n\n this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;\n };\n\n this.handleSlideShow = () => {\n if (this.getOption('slideshow') > 0) {\n this.updateIndex(this.index + 1);\n clearTimeout(this.handleSlideShow);\n }\n };\n\n // setup\n this.setSlideSize();\n this.goToSlide(this.index);\n }\n\n updated(prevProps) {\n this.setSlideSize();\n this.setToolbarSize();\n\n if (prevProps.has('index')) {\n this.updateIndex(this.index);\n setTimeout(this.handleSlideShow, this.getOption('slideshow') * 1000);\n }\n }\n\n render() {\n return html`\n <slot name=\"prev\" @slotchange=${this.handleArrows}></slot>\n <div id=\"container\" class=\"container\" part=\"container\">\n <section\n id=\"slides\"\n class=\"slides\"\n part=\"slides\"\n @mousedown=${this.swipeStart}\n @mouseup=${this.swipeEnd}\n @touchstart=${this.swipeStart}\n @touchend=${this.swipeEnd}\n @mouseleave=${this.swipeLeave}\n >\n <div id=\"slider\" class=\"slider\" part=\"slider\" style=\"width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});\">\n <slot name=\"slides\" @slotchange=\"${this.handleSlotChange}\"></slot>\n </div>\n </section>\n ${this.makeToolbar()}\n </div>\n <slot name=\"next\" @slotchange=${this.handleArrows}></slot>\n `;\n }\n\n swipeStart(event) {\n this.startX = event.touches ? event.touches[0].pageX : event.pageX;\n\n this.addEventListener('mousemove', this.swipeMove);\n this.addEventListener('touchmove', this.swipeMove);\n }\n\n swipeEnd(event) {\n this.updateIndex(this.swipeUpdate(event));\n this.removeEventListener('mousemove', this.swipeMove, false);\n this.removeEventListener('touchmove', this.swipeMove, false);\n }\n\n swipeUpdate(event) {\n const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;\n const direction = this.startX > pageX ? 'right' : 'left';\n const threshold = this.slidesElement.offsetWidth / 3;\n const diff = this.startX - pageX;\n const shouldUpdate = Math.abs(diff) > threshold;\n\n let { index } = this;\n\n if (shouldUpdate && direction === 'right') {\n index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;\n }\n\n if (shouldUpdate && direction === 'left') {\n index = this.index < 1 ? 0 : this.index - 1;\n }\n\n return index;\n }\n\n swipeLeave() {\n this.updateIndex(this.index);\n this.removeEventListener('mousemove', this.swipeMove, false);\n this.removeEventListener('touchmove', this.swipeMove, false);\n }\n\n setSlideSize() {\n this.slideWidth = this.containerElement?.offsetWidth as number / this.getOption('perView');\n\n this.slides.forEach((slide) => {\n slide.style.marginLeft = `${this.getOption('gap') / 2}px`;\n slide.style.marginRight = `${this.getOption('gap') / 2}px`;\n slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;\n });\n\n this.sliderWidth = `${this.slideWidth * this.slides.length}px`;\n }\n\n setToolbarSize() {\n if (this.inner && this.toolbarElement) {\n const width = this.slidesElement.offsetWidth;\n this.toolbarElement.style.width = `${width}px`;\n }\n }\n\n makeToolbar() {\n if (this.toolbarSlotElement) {\n return html`\n <section id=\"toolbar\" class=\"toolbar\" part=\"toolbar\">\n <slot name=\"toolbar\"></slot>\n </section>\n `;\n }\n\n return null;\n }\n\n handleSlotChange() {\n const slides = this.querySelectorAll('kemet-carousel-slide') as NodeListOf<KemetCarouselSlideInterface>;\n const links = this.querySelectorAll('kemet-carousel-link') as NodeListOf<KemetCarouselLinkInterface>;\n\n // handle slides\n slides.forEach((slide) => {\n this.slides.push(slide);\n });\n\n this.updateInformation();\n this.total = slides.length;\n slides[this.index].selected = true;\n\n // handle links\n links.forEach((link) => {\n this.links.push(link);\n });\n }\n\n handleArrows() {\n this.arrows = true;\n }\n\n handleFirst() {\n this.updateIndex(0);\n }\n\n handleLast() {\n this.updateIndex(this.slides.length - 1);\n }\n\n handleNext() {\n let newIndex = this.index + this.getOption('perMove');\n\n if (newIndex >= this.slides.length) {\n if (this.getOption('rewind')) {\n newIndex = 0;\n } else {\n newIndex = this.index;\n }\n }\n\n this.updateIndex(newIndex);\n }\n\n handlePrev() {\n let newIndex = this.index - this.getOption('perMove');\n\n // send them to the last slide\n if (newIndex < 0) {\n if (this.getOption('rewind')) {\n newIndex = this.slides.length - 1;\n } else {\n newIndex = this.index;\n }\n }\n\n this.updateIndex(newIndex);\n }\n\n updateIndex(newIndex) {\n let currentSlide = this.slides[this.index];\n let currentLink = this.links[newIndex];\n\n // remove selected from all links\n this.links.forEach((link) => {\n link.selected = false;\n });\n\n // if current link is invalid assume it's the first link\n if (!currentLink) {\n [currentLink] = this.links;\n }\n\n // add selected to current link\n if (currentLink) {\n currentLink.selected = true;\n }\n\n if (currentSlide) {\n currentSlide.setAttribute('aria-hidden', 'true');\n\n // correct for invalid indexes\n if (newIndex > -1 && newIndex < this.slides.length) {\n this.index = newIndex;\n } else {\n // eslint-disable-next-line no-console\n console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');\n this.index = 0;\n }\n\n // move\n this.goToSlide(this.index);\n\n // update new slide\n currentSlide = this.slides[this.index];\n currentSlide.setAttribute('aria-hidden', 'false');\n\n this.slides.forEach((slide) => {\n slide.selected = false;\n });\n\n currentSlide.selected = true;\n\n // notify consumers of slide change\n emitEvent(this, 'kemet-carousel-change-start', this);\n\n // update information element\n this.updateInformation();\n }\n }\n\n updateInformation() {\n this.informationSlot = this.slides[this.index].querySelector('[slot=\"information\"]');\n\n if (this.informationElement) {\n if (this.informationSlot) {\n this.informationElement.innerHTML = this.informationSlot.outerHTML;\n } else {\n this.informationElement.innerHTML = '';\n }\n }\n }\n\n goToSlide(index) {\n if (this.getOption('center') === true) {\n const slidesCenter = this.slidesElement.offsetWidth / 2;\n const slideX = this.slideWidth * index;\n this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;\n } else {\n this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;\n }\n }\n\n handleTransitionEnd() {\n const currentElement = this.querySelector('kemet-carousel-current') as KemetCarouselCurrentInterface;\n\n if (currentElement) {\n currentElement.current = this.index + 1;\n }\n\n emitEvent(this, 'kemet-carousel-change-finished', this);\n }\n\n handleLink(event) {\n this.updateIndex(event.detail.slide);\n }\n\n getOption(option) {\n const breakpoints = Object.keys(this.breakpoints);\n let value = this.options[option];\n\n breakpoints.forEach((breakpoint) => {\n if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {\n value = this.breakpoints[breakpoint][option];\n }\n\n return value;\n });\n\n return value;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-carousel': KemetCarousel\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-carousel.js","sourceRoot":"","sources":["../../../src/components/kemet-carousel/kemet-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesCarousel } from './styles';\nimport { KemetCarouselCurrentInterface, KemetCarouselLinkInterface, KemetCarouselSlideInterface } from './types';\n\n/*\n \n * @since 1.1.0\n * @status stable\n \n @tagname kemet-carousel\n * @summary The Carousel allows you to click or swipe through content.\n \n @prop {number} index - The current slide index.\n * @prop {number} total - The total amount of slides.\n * @prop {string} sliderWidth - The width of the slider.\n * @prop {string} sliderTranslateX - The X position of the slider.\n * @prop {boolean} inner - Displays the toolbar inside the carousel container.\n * @prop {boolean} arrows - Determines whether or not to display arrows.\n * @prop {object} options - Default options for the carousel.\n * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.\n \n @event kemet-carousel-change-start - Fires with the a slide has begun to change.\n * @event kemet-carousel-change-finished - Fires when a slide has changed and finished animating\n \n @slot slides - Place the slide elements here.\n * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.\n * @slot prev - A slot for the previous arrow.\n * @slot next - A slot for the next arrow.\n * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.\n \n @cssproperty --kemet-carousel-width - The width of the carousel. Default: 100%.\n * @cssproperty --kemet-carousel-height - The height of the carousel. Default: auto.\n * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar. Default: 1rem.\n * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar. Default: center.\n * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar. Default: 1rem.\n * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width. Default: 100%.\n * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar. Default: 0.\n * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar. Default: auto.\n * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color. Default: var(--kemet-color-white).\n * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color. Default: rgba(0, 0, 0, 0.4).\n * @cssproperty --kemet-carousel-slides-border - The border around the slides. Default: 1px solid var(--kemet-color-gray1).\n * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides. Default: 300ms.\n * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity. Default: 0.25.\n * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity. Default: 1.\n * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed. Default: 300ms.\n \n @csspart container - Contains the slides and toolbar.\n * @csspart slides - Wrapper for the slider.\n * @csspart slider - Contains the slides.\n * @csspart toolbar - Contains the toolbar.\n \n /\n\n@customElement('kemet-carousel')\nexport default class KemetCarousel extends LitElement {\n static styles = [stylesCarousel];\n\n @property({ type: Number, reflect: true })\n index: number = 0;\n\n @property({ type: Number })\n total: number = 0;\n\n @property({ type: String })\n sliderWidth: string = 'auto';\n\n @property({ type: String })\n sliderTranslateX: string = '0';\n\n @property({ type: Boolean, reflect: true })\n inner: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n arrows: boolean = false;\n\n @property({ type: Object })\n options: object = {\n perView: 1,\n perMove: 1,\n gap: 12,\n slideshow: 0,\n rewind: true,\n center: false,\n };\n\n @property({ type: Object })\n breakpoints: object = {\n 768: {\n perView: 2,\n gap: 24,\n rewind: false,\n },\n 1280: {\n perView: 2.5,\n center: true,\n },\n };\n\n /** @internal /\n @state()\n slides: any[] = [];\n\n /* @internal /\n @state()\n links: any[] = [];\n\n /* @internal /\n @state()\n toolbarSlotElement: HTMLElement \| null;\n\n /* @internal /\n @state()\n informationElement: HTMLElement \| null;\n\n /* @internal /\n @state()\n swipeMove: (event) => void;\n\n /* @internal /\n @state()\n handleSlideShow: any;\n\n /* @internal /\n @state()\n startX: number;\n\n /* @internal /\n @state()\n slideWidth: number;\n\n /* @internal /\n @state()\n informationSlot: HTMLElement;\n\n /* @internal /\n @query('#container')\n containerElement: HTMLElement;\n\n /* @internal /\n @query('#slides')\n slidesElement: HTMLElement;\n\n /* @internal /\n @query('#slider')\n sliderElement: HTMLElement;\n\n /* @internal /\n @query('#toolbar')\n toolbarElement: HTMLElement;\n\n\n constructor() {\n super();\n\n // bindings\n this.addEventListener('kemet-carousel-first', this.handleFirst.bind(this));\n this.addEventListener('kemet-carousel-last', this.handleLast.bind(this));\n this.addEventListener('kemet-carousel-next', this.handleNext.bind(this));\n this.addEventListener('kemet-carousel-prev', this.handlePrev.bind(this));\n this.addEventListener('kemet-carousel-link', this.handleLink.bind(this));\n }\n\n firstUpdated() {\n // elements\n this.toolbarSlotElement = this.querySelector('[slot=\"toolbar\"]');\n this.informationElement = this.querySelector('kemet-carousel-information');\n\n // events\n window.addEventListener('resize', () => {\n this.setSlideSize();\n this.setToolbarSize();\n this.updateIndex(this.index);\n });\n\n this.sliderElement?.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n\n // methods\n this.swipeMove = (event) => {\n event.preventDefault();\n\n const pageX = event.touches ? event.touches[0].pageX : event.pageX;\n const currentSlide = this.slides[this.index];\n\n this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;\n };\n\n this.handleSlideShow = () => {\n if (this.getOption('slideshow') > 0) {\n this.updateIndex(this.index + 1);\n clearTimeout(this.handleSlideShow);\n }\n };\n\n // setup\n this.setSlideSize();\n this.goToSlide(this.index);\n }\n\n updated(prevProps) {\n this.setSlideSize();\n this.setToolbarSize();\n\n if (prevProps.has('index')) {\n this.updateIndex(this.index);\n setTimeout(this.handleSlideShow, this.getOption('slideshow') 1000);\n }\n }\n\n render() {\n return html`\n <slot name=\"prev\" @slotchange=${this.handleArrows}></slot>\n <div id=\"container\" class=\"container\" part=\"container\">\n <section\n id=\"slides\"\n class=\"slides\"\n part=\"slides\"\n @mousedown=${this.swipeStart}\n @mouseup=${this.swipeEnd}\n @touchstart=${this.swipeStart}\n @touchend=${this.swipeEnd}\n @mouseleave=${this.swipeLeave}\n >\n <div id=\"slider\" class=\"slider\" part=\"slider\" style=\"width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});\">\n <slot name=\"slides\" @slotchange=\"${this.handleSlotChange}\"></slot>\n </div>\n </section>\n ${this.makeToolbar()}\n </div>\n <slot name=\"next\" @slotchange=${this.handleArrows}></slot>\n `;\n }\n\n swipeStart(event) {\n this.startX = event.touches ? event.touches[0].pageX : event.pageX;\n\n this.addEventListener('mousemove', this.swipeMove);\n this.addEventListener('touchmove', this.swipeMove);\n }\n\n swipeEnd(event) {\n this.updateIndex(this.swipeUpdate(event));\n this.removeEventListener('mousemove', this.swipeMove, false);\n this.removeEventListener('touchmove', this.swipeMove, false);\n }\n\n swipeUpdate(event) {\n const pageX = event.changedTouches ? event.changedTouches[0].pageX : event.pageX;\n const direction = this.startX > pageX ? 'right' : 'left';\n const threshold = this.slidesElement.offsetWidth / 3;\n const diff = this.startX - pageX;\n const shouldUpdate = Math.abs(diff) > threshold;\n\n let { index } = this;\n\n if (shouldUpdate && direction === 'right') {\n index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;\n }\n\n if (shouldUpdate && direction === 'left') {\n index = this.index < 1 ? 0 : this.index - 1;\n }\n\n return index;\n }\n\n swipeLeave() {\n this.updateIndex(this.index);\n this.removeEventListener('mousemove', this.swipeMove, false);\n this.removeEventListener('touchmove', this.swipeMove, false);\n }\n\n setSlideSize() {\n this.slideWidth = this.containerElement?.offsetWidth as number / this.getOption('perView');\n\n this.slides.forEach((slide) => {\n slide.style.marginLeft = `${this.getOption('gap') / 2}px`;\n slide.style.marginRight = `${this.getOption('gap') / 2}px`;\n slide.style.width = `${this.slideWidth - this.getOption('gap')}px`;\n });\n\n this.sliderWidth = `${this.slideWidth * this.slides.length}px`;\n }\n\n setToolbarSize() {\n if (this.inner && this.toolbarElement) {\n const width = this.slidesElement.offsetWidth;\n this.toolbarElement.style.width = `${width}px`;\n }\n }\n\n makeToolbar() {\n if (this.toolbarSlotElement) {\n return html`\n <section id=\"toolbar\" class=\"toolbar\" part=\"toolbar\">\n <slot name=\"toolbar\"></slot>\n </section>\n `;\n }\n\n return null;\n }\n\n handleSlotChange() {\n const slides = this.querySelectorAll('kemet-carousel-slide') as NodeListOf<KemetCarouselSlideInterface>;\n const links = this.querySelectorAll('kemet-carousel-link') as NodeListOf<KemetCarouselLinkInterface>;\n\n // handle slides\n slides.forEach((slide) => {\n this.slides.push(slide);\n });\n\n this.updateInformation();\n this.total = slides.length;\n slides[this.index].selected = true;\n\n // handle links\n links.forEach((link) => {\n this.links.push(link);\n });\n }\n\n handleArrows() {\n this.arrows = true;\n }\n\n handleFirst() {\n this.updateIndex(0);\n }\n\n handleLast() {\n this.updateIndex(this.slides.length - 1);\n }\n\n handleNext() {\n let newIndex = this.index + this.getOption('perMove');\n\n if (newIndex >= this.slides.length) {\n if (this.getOption('rewind')) {\n newIndex = 0;\n } else {\n newIndex = this.index;\n }\n }\n\n this.updateIndex(newIndex);\n }\n\n handlePrev() {\n let newIndex = this.index - this.getOption('perMove');\n\n // send them to the last slide\n if (newIndex < 0) {\n if (this.getOption('rewind')) {\n newIndex = this.slides.length - 1;\n } else {\n newIndex = this.index;\n }\n }\n\n this.updateIndex(newIndex);\n }\n\n updateIndex(newIndex) {\n let currentSlide = this.slides[this.index];\n let currentLink = this.links[newIndex];\n\n // remove selected from all links\n this.links.forEach((link) => {\n link.selected = false;\n });\n\n // if current link is invalid assume it's the first link\n if (!currentLink) {\n [currentLink] = this.links;\n }\n\n // add selected to current link\n if (currentLink) {\n currentLink.selected = true;\n }\n\n if (currentSlide) {\n currentSlide.setAttribute('aria-hidden', 'true');\n\n // correct for invalid indexes\n if (newIndex > -1 && newIndex < this.slides.length) {\n this.index = newIndex;\n } else {\n // eslint-disable-next-line no-console\n console.warn('An invalid index number was entered. The kemet-carousel has been reset to the first slide.');\n this.index = 0;\n }\n\n // move\n this.goToSlide(this.index);\n\n // update new slide\n currentSlide = this.slides[this.index];\n currentSlide.setAttribute('aria-hidden', 'false');\n\n this.slides.forEach((slide) => {\n slide.selected = false;\n });\n\n currentSlide.selected = true;\n\n // notify consumers of slide change\n emitEvent(this, 'kemet-carousel-change-start', this);\n\n // update information element\n this.updateInformation();\n }\n }\n\n updateInformation() {\n this.informationSlot = this.slides[this.index].querySelector('[slot=\"information\"]');\n\n if (this.informationElement) {\n if (this.informationSlot) {\n this.informationElement.innerHTML = this.informationSlot.outerHTML;\n } else {\n this.informationElement.innerHTML = '';\n }\n }\n }\n\n goToSlide(index) {\n if (this.getOption('center') === true) {\n const slidesCenter = this.slidesElement.offsetWidth / 2;\n const slideX = this.slideWidth * index;\n this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;\n } else {\n this.sliderTranslateX = `${(this.slideWidth * index) * -1}px`;\n }\n }\n\n handleTransitionEnd() {\n const currentElement = this.querySelector('kemet-carousel-current') as KemetCarouselCurrentInterface;\n\n if (currentElement) {\n currentElement.current = this.index + 1;\n }\n\n emitEvent(this, 'kemet-carousel-change-finished', this);\n }\n\n handleLink(event) {\n this.updateIndex(event.detail.slide);\n }\n\n getOption(option) {\n const breakpoints = Object.keys(this.breakpoints);\n let value = this.options[option];\n\n breakpoints.forEach((breakpoint) => {\n if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== undefined) {\n value = this.breakpoints[breakpoint][option];\n }\n\n return value;\n });\n\n return value;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-carousel': KemetCarousel\n }\n}\n"]}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-checkbox/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,OAAO,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK,GACf,EAAE,EAAE,CAAC,IAAI,CAAA;0BACgB,KAAK,aAAa,OAAO,mBAAmB,aAAa,cAAc,QAAQ,aAAa,OAAO,YAAY,MAAM;CAC9I,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,KAAK;QACd,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;SACnB;QACD,aAAa,EAAE;YACb,OAAO,EAAE,SAAS;SACnB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;SACnB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;SACnB;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;SACnB;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-checkbox';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Checkbox',\n component: 'kemet-checkbox',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n label = 'Label',\n checked = false,\n indeterminate = false,\n disabled = false,\n rounded = false,\n filled = false,\n}) => html`\n <kemet-checkbox label=${label} ?checked=${checked} ?indeterminate=${indeterminate} ?disabled=${disabled} ?rounded=${rounded} ?filled=${filled}></kemet-checkbox>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n label: 'Label',\n checked: false,\n indeterminate: false,\n disabled: false,\n rounded: false,\n filled: false,\n },\n argTypes: {\n label: {\n control: 'text',\n },\n checked: {\n control: 'boolean',\n },\n indeterminate: {\n control: 'boolean',\n },\n disabled: {\n control: 'boolean',\n },\n rounded: {\n control: 'boolean',\n },\n filled: {\n control: 'boolean',\n },\n }\n};\n"]}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-combo/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AAExB,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,IAAI,GAAG;IACX,sBAAsB;IACtB,6BAA6B;IAC7B,wCAAwC;IACxC,yCAAyC;IACzC,gCAAgC;IAChC,kCAAkC;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;6CAGkB,IAAI;;CAEhD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-combo';\n\nimport '../../kemet-field/kemet-field';\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Combo',\n component: 'kemet-combo',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst faqs = [\n 'How do use Kemet UI?',\n 'What is a Blueprint System?',\n 'Are there going to be more components?',\n 'Is it good to use attribute for styles?',\n 'Does Kemet UI work with React?',\n 'Does Kemet UI work with Angular?',\n];\n\nconst Template = () => html`\n <kemet-field slug=\"unique-identifier\" label=\"Frequently asked questions.\" kemet-margin=\"tiny:smallest\">\n <kemet-input slot=\"input\" name=\"input\" placeholder=\"Start typing to see the FAQs\"></kemet-input>\n <kemet-combo slot=\"component\" .options=${faqs}></kemet-combo>\n </kemet-field>\n`;\n\nexport const Standard: Story = {\n render: () => Template(),\n};\n"]}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-count/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AAExB,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,OAAO,EACf,OAAO,GAAG,sBAAsB,EAChC,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,uBAAuB,EACnC,mBAAmB,GAAG,IAAI,EAC1B,KAAK,GAAG,CAAC,GACV,EAAE,EAAE,CAAC,IAAI,CAAA;iDACuC,KAAK,cAAc,OAAO,aAAa,MAAM;2DACnC,MAAM;6CACpB,SAAS,YAAY,KAAK,2BAA2B,mBAAmB;;CAEpH,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,sBAAsB;QAC/B,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE,uBAAuB;QAClC,mBAAmB,EAAE,IAAI;QACzB,KAAK,EAAE,CAAC;KACT;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC;SAC1C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-count';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-field/kemet-field';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Count',\n component: 'kemet-count',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n label = 'Label',\n message = 'Too many characters!',\n status = 'standard',\n remaining = 'characters remaining.',\n validateImmediately = true,\n limit = 8,\n}) => html`\n <kemet-field slug=\"unique-identifier\" label=\"${label}\" message=\"${message}\" status=\"${status}\">\n <kemet-input slot=\"input\" name=\"input-field\" status=\"${status}\" validate-on-blur></kemet-input>\n <kemet-count slot=\"component\" message=\"${remaining}\" limit=\"${limit}\" ?validate-immediately=${validateImmediately}></kemet-count>\n </kemet-field>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n label: 'Label',\n message: 'Too many characters!',\n status: 'standard',\n remaining: 'characters remaining.',\n validateImmediately: true,\n limit: 8,\n },\n argTypes: {\n label: {\n control: { type: 'text' },\n },\n message: {\n control: { type: 'text' },\n },\n status: {\n control: { type: 'radio' },\n options: ['standard', 'error', 'warning'],\n },\n remaining: {\n control: { type: 'text' },\n },\n validateImmediately: {\n control: { type: 'boolean' },\n },\n limit: {\n control: { type: 'number' },\n },\n }\n};\n"]}

package/dist/components/kemet-draggable/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-draggable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,oBAAoB,CAAC;AAE5B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,IAAI,GACd,EAAE,EAAE,CAAC,IAAI,CAAA;4BACkB,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC;oBACtC,IAAI;;CAEvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,sBAAsB;KAC/B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-draggable';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Draggable',\n component: 'kemet-draggable',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n text = 'Drag Me',\n memory = null,\n}) => html`\n <kemet-draggable memory=${ifDefined(memory || undefined)}>\n <kemet-button>${text}</kemet-button>\n </kemet-draggable>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n text: 'Drag Me',\n memory: 'kemet-draggable-demo',\n },\n argTypes: {\n text: {\n control: { type: 'text' },\n },\n memory: {\n control: { type: 'text' },\n },\n }\n};\n"]}

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

@@ -21,12 +21,19 @@ export default class KemetDraggable extends LitElement {
     top: string;
     left: string;
     measure: boolean;
+    /** @internal */
     position1: number;
+    /** @internal */
     position2: number;
+    /** @internal */
     position3: number;
+    /** @internal */
     position4: number;
+    /** @internal */
     mouseMove: (event: any) => void;
+    /** @internal */
     mouseUp: () => void;
+    /** @internal */
     draggableElement: HTMLElement;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;

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,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,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;~~IAoG3B~~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~~AAxHQ~~,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;~~AAGzB~~;IADC,KAAK,EAAE;iDACU;~~AAGlB~~;IADC,KAAK,EAAE;iDACU;~~AAGlB~~;IADC,KAAK,EAAE;iDACU;~~AAGlB~~;IADC,KAAK,EAAE;iDACU;~~AAGlB~~;IADC,KAAK,EAAE;iDACmB;~~AAG3B~~;IADC,KAAK,EAAE;+CACY;~~AAGpB~~;IADC,KAAK,CAAC,YAAY,CAAC;wDACU;~~AA1CX~~,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,~~CAyHlC~~;~~eAzHoB~~,cAAc","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query, state } 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 @state()\n position1: number;\n\n @state()\n position2: number;\n\n @state()\n position3: number;\n\n @state()\n position4: number;\n\n @state()\n mouseMove: (event) => void;\n\n @state()\n mouseUp: () => void;\n\n @query('#draggable')\n draggableElement: HTMLElement;\n\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 => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n <slot></slot>\n </div>\n `;\n }\n\n startDrag(event) {\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) {\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 this.top = `${this.draggableElement?.offsetTop - this.position2}px`;\n this.left = `${this.draggableElement?.offsetLeft - this.position1}px`;\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":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query, state } 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) => void;\n\n /* @internal /\n @state()\n mouseUp: () => void;\n\n /* @internal /\n @query('#draggable')\n draggableElement: HTMLElement;\n\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 => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n <slot></slot>\n </div>\n `;\n }\n\n startDrag(event) {\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) {\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 this.top = `${this.draggableElement?.offsetTop - this.position2}px`;\n this.left = `${this.draggableElement?.offsetLeft - this.position1}px`;\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"]}

package/dist/components/kemet-drawer/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-drawer/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-drawer';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Drawer',\n component: 'kemet-drawer',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n width = '300px',\n height = '100%',\n color = '#fafafa',\n backgroundColor = '#202020',\n opened = false,\n effect = 'slide',\n side = 'left',\n overlay = false,\n overlayColor = 'rgba(0,0,0,0.2)',\n}) => {\n setTimeout(() => {\n const docsStoryWrapper = document.querySelector('.docs-story > div') as HTMLElement;\n if (docsStoryWrapper) docsStoryWrapper.style.padding = '0';\n }, 100);\n\n return html`\n <style>\n kemet-drawer {\n --kemet-drawer-width: ${width};\n --kemet-drawer-height: ${height};\n --kemet-drawer-color: ${color};\n --kemet-drawer-background-color: ${backgroundColor};\n --kemet-drawer-overlay-color: ${overlayColor};\n }\n </style>\n <kemet-drawer ?opened=${opened} effect=\"${effect}\" side=\"${side}\" ?overlay=${overlay}>\n <nav slot=\"navigation\" kemet-padding=\"tiny:large\">\n <p>Your navigation goes here.</p>\n <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n </nav>\n <section slot=\"content\">\n <div kemet-padding=\"tiny:large\">\n <p>Your content goes here.</p>\n <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n </div>\n </section>\n </kemet-drawer>\n `;\n};\n\nconst toggleDrawer = (event) => {\n const drawer = event.target.closest('kemet-drawer');\n drawer.opened = !drawer.opened;\n};\n\nexport const Standard: Story = {\n render: args => Template(args),\n argTypes: {\n width: {\n control: { type: 'text' },\n },\n height: {\n control: { type: 'text' },\n },\n color: {\n control: { type: 'color' },\n },\n backgroundColor: {\n control: { type: 'color' },\n },\n opened: {\n control: { type: 'boolean' },\n },\n effect: {\n control: { type: 'select' },\n options: ['slide', 'reveal', 'push', 'scale'],\n },\n side: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n overlay: {\n control: { type: 'boolean' },\n },\n overlayColor: {\n control: { type: 'color' },\n },\n },\n args: {\n width: '300px',\n height: '100%',\n color: '#fafafa',\n backgroundColor: '#202020',\n opened: false,\n effect: 'slide',\n side: 'left',\n overlay: false,\n overlayColor: 'rgba(0,0,0,0.2)',\n },\n};\n"]}

package/dist/components/kemet-fab/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-fab/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,cAAc,CAAC;AACtB,OAAO,6BAA6B,CAAC;AAErC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACvB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,WAAW,EACX,aAAa,EACb,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE,CAAC,IAAI,CAAA;yBACe,QAAQ,cAAc,QAAQ,cAAc,QAAQ,UAAU,IAAI,iBAAiB,SAAS,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC;;MAEvL,KAAK;;CAEV,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;CACjC,CAAA","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-fab';\nimport '../../kemet-icon/kemet-icon';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / FAB',\n component: 'kemet-fab',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n label = 'Action',\n outlined = false,\n disabled = false,\n pill = false,\n expandPoint,\n collapsePoint,\n expanded = false,\n}) => html`\n <kemet-fab ?expanded=${expanded} ?outlined=${outlined} ?disabled=${disabled} ?pill=${pill} expand-point=${ifDefined(expandPoint || null)} collapse-point=${ifDefined(collapsePoint || null)}>\n <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon>\n ${label}\n </kemet-fab>\n`;\n\nconst TemplateMultiple = () => html`\n <style>\n .fabs {\n position: fixed;\n bottom: 1rem;\n right: 1rem;\n z-index: 99;\n }\n\n .fabs li {\n display: flex;\n align-items: flex-end;\n }\n </style>\n <ul class=\"fabs\" kemet-layout=\"flexcolumn\" kemet-gutters kemet-margin=\"tiny:none\" kemet-padding=\"tiny:none\">\n <li>\n <kemet-fab pill>\n <kemet-icon slot=\"icon\" icon=\"envelope\" size=\"24\"></kemet-icon> Email\n </kemet-fab>\n </li>\n <li>\n <kemet-fab pill>\n <kemet-icon slot=\"icon\" icon=\"calendar\" size=\"24\"></kemet-icon> Calendar\n </kemet-fab>\n </li>\n <li>\n <kemet-fab pill>\n <kemet-icon slot=\"icon\" icon=\"pencil-square\" size=\"24\"></kemet-icon> Edit\n </kemet-fab>\n </li>\n </ul>\n`;\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n label: 'Action',\n outlined: false,\n disabled: false,\n pill: false,\n expanded: false,\n },\n argTypes: {\n label: {\n control: { type: 'text' },\n },\n outlined: {\n control: { type: 'boolean' },\n },\n disabled: {\n control: { type: 'boolean' },\n },\n pill: {\n control: { type: 'boolean' },\n },\n expandPoint: {\n control: { type: 'number' },\n },\n collapsePoint: {\n control: { type: 'number' },\n },\n expanded: {\n control: { type: 'boolean' },\n },\n }\n};\n\nexport const Multiple: Story = {\n render: () => TemplateMultiple(),\n}\n"]}

package/dist/components/kemet-field/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-field/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-field';\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-textarea/kemet-textarea';\nimport '../../kemet-select/kemet-select';\nimport '../../kemet-select/kemet-option';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Field',\n component: 'kemet-accordion',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateInput = ({\n label = 'Label', message = '', status = 'standard',\n}) => html`\n <kemet-field slug=\"unique-identifier\" label=\"${label}\" message=\"${message}\" status=\"${status}\">\n <kemet-input required slot=\"input\" name=\"input-field\" status=\"${status}\" validate-on-blur></kemet-input>\n </kemet-field>\n`;\n\nconst TemplateSelect = ({\n label = 'Label', message = '', status = 'standard',\n}) => html`\n <kemet-field slug=\"unique-identifier\" label=\"${label}\" message=\"${message}\" status=\"${status}\">\n <kemet-select slot=\"input\" name=\"select-field\" status=\"${status}\" required>\n <kemet-option label=\"Choose an Item\" value=\"\"></kemet-option>\n <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n <kemet-option label=\"Item 2\" value=\"2\" selected></kemet-option>\n <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n <kemet-option label=\"Item 4\" value=\"4\" disabled></kemet-option>\n </kemet-select>\n </kemet-field>\n`;\n\nconst TemplateTextarea = ({\n label = 'Label', message = '', status = 'standard',\n}) => html`\n <kemet-field slug=\"unique-identifier\" label=\"${label}\" message=\"${message}\" status=\"${status}\">\n <kemet-textarea required slot=\"input\" name=\"textarea-field\" status=\"${status}\"></kemet-textarea>\n </kemet-field>\n`;\n\nexport const Standard: Story = {\n render: args => TemplateInput(args),\n args: {\n label: 'Label',\n message: '',\n status: 'standard',\n },\n argTypes: {\n label: {\n name: 'Label',\n control: { type: 'text' },\n },\n message: {\n name: 'Validation Message',\n control: { type: 'text' },\n },\n status: {\n name: 'Status',\n control: { type: 'radio' },\n options: ['standard', 'error', 'success', 'warning'],\n },\n }\n};\n\nexport const Select: Story = {\n render: args => TemplateSelect(args),\n args: {\n label: 'Label',\n message: '',\n status: 'standard',\n },\n argTypes: {\n label: {\n name: 'Label',\n control: { type: 'text' },\n },\n message: {\n name: 'Validation Message',\n control: { type: 'text' },\n },\n status: {\n name: 'Status',\n control: { type: 'radio' },\n options: ['standard', 'error', 'success', 'warning'],\n },\n }\n};\n\nexport const Textarea: Story = {\n render: args => TemplateTextarea(args),\n args: {\n label: 'Label',\n message: '',\n status: 'standard',\n },\n argTypes: {\n label: {\n name: 'Label',\n control: { type: 'text' },\n },\n message: {\n name: 'Validation Message',\n control: { type: 'text' },\n },\n status: {\n name: 'Status',\n control: { type: 'radio' },\n options: ['standard', 'error', 'success', 'warning'],\n },\n }\n};\n"]}

package/dist/components/kemet-flipcard/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-flipcard/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AAEnC,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,MAAM,EACf,UAAU,GAAG,yBAAyB,EACtC,oBAAoB,GAAG,aAAa,EACpC,SAAS,GAAG,yBAAyB,EACrC,mBAAmB,GAAG,aAAa,EACnC,MAAM,GAAG,yCAAyC,EAClD,YAAY,GAAG,GAAG,EAClB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,YAAY,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,GAChB,EAAE,EAAE,CAAC,IAAI,CAAA;;;gCAGsB,KAAK;iCACJ,MAAM;sCACD,UAAU;iDACC,oBAAoB;qCAChC,SAAS;gDACE,mBAAmB;iCAClC,MAAM;wCACC,YAAY;gCACpB,KAAK;;;;gBAIrB,OAAO;gBACP,OAAO;YACX,IAAI;sBACM,WAAW;eAClB,OAAO;;;;;;;;;;;;;;;CAerB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,oBAAoB,EAAE;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACpC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,yBAAyB;QACrC,oBAAoB,EAAE,aAAa;QACnC,SAAS,EAAE,yBAAyB;QACpC,mBAAmB,EAAE,aAAa;QAClC,MAAM,EAAE,yCAAyC;QACjD,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,YAAY;QAClB,WAAW,EAAE,KAAK;QAClB,OAAO,EAAE,KAAK;KACf;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-flipcard';\nimport '../kemet-flipcard-trigger';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Flipcard',\n component: 'kemet-flipcard',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n width = '50%',\n height = 'auto',\n frontColor = 'var(--kemet-color-text)',\n frontBackgroundColor = 'transparent',\n backColor = 'var(--kemet-color-text)',\n backBackgroundColor = 'transparent',\n border = '2px solid var(--kemet-color-background)',\n borderRadius = '0',\n ratio = '16/9',\n flipped = false,\n measure = false,\n axis = 'horizontal',\n flipOnHover = false,\n rounded = false,\n}) => html`\n <style>\n kemet-flipcard {\n --kemet-flipcard-width: ${width};\n --kemet-flipcard-height: ${height};\n --kemet-flipcard-front-color: ${frontColor};\n --kemet-flipcard-front-background-color: ${frontBackgroundColor};\n --kemet-flipcard-back-color: ${backColor};\n --kemet-flipcard-back-background-color: ${backBackgroundColor};\n --kemet-flipcard-border: ${border};\n --kemet-flipcard-border-radius: ${borderRadius};\n --kemet-flipcard-ratio: ${ratio};\n }\n </style>\n <kemet-flipcard\n ?flipped=\"${flipped}\"\n ?measure=\"${measure}\"\n axis=\"${axis}\"\n ?flip-on-hover=\"${flipOnHover}\"\n ?rounded=${rounded}\n >\n <div slot=\"front\" kemet-elevation=\"layer5\" kemet-padding=\"tiny:normal\">\n <p>This is the front of the card.</p>\n <kemet-flipcard-trigger>\n <kemet-button>Flip Me</kemet-button>\n </kemet-flipcard-trigger>\n </div>\n <div slot=\"back\" kemet-elevation=\"layer5\" kemet-padding=\"tiny:normal\">\n <p>This is the back of the card.</p>\n <kemet-flipcard-trigger>\n <kemet-button>Flip Me</kemet-button>\n </kemet-flipcard-trigger>\n </div>\n </kemet-flipcard>\n`;\n\nexport const Standard: Story = {\n render: (args) => Template(args),\n argTypes: {\n width: {\n control: { type: 'text' },\n },\n height: {\n control: { type: 'text' },\n },\n frontColor: {\n control: { type: 'color' },\n },\n frontBackgroundColor: {\n control: { type: 'color' },\n },\n backColor: {\n control: { type: 'color' },\n },\n backBackgroundColor: {\n control: { type: 'color' },\n },\n border: {\n control: { type: 'text' },\n },\n borderRadius: {\n control: { type: 'text' },\n },\n flipped: {\n control: { type: 'boolean' },\n },\n measure: {\n control: { type: 'boolean' },\n },\n axis: {\n control: { type: 'select' },\n options: ['horizontal', 'vertical'],\n },\n flipOnHover: {\n control: { type: 'boolean' },\n },\n rounded: {\n control: { type: 'boolean' },\n },\n },\n args: {\n width: '50%',\n height: 'auto',\n frontColor: 'var(--kemet-color-text)',\n frontBackgroundColor: 'transparent',\n backColor: 'var(--kemet-color-text)',\n backBackgroundColor: 'transparent',\n border: '2px solid var(--kemet-color-background)',\n borderRadius: '0',\n ratio: '16/9',\n flipped: false,\n measure: false,\n axis: 'horizontal',\n flipOnHover: false,\n rounded: false,\n },\n};\n"]}

package/dist/components/kemet-icon/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-icon/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CACxB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;qBACR,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI;CACpE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,GAAG,EAAE,WAAW;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,GAAG;KACV;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,oBAAoB,CAAC;SAC3F;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-icon';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Icon',\n component: 'kemet-icon',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = args => html`\n <kemet-icon set=\"${args.set}\" icon=\"${args.icon}\" size=\"${args.size}\"></kemet-icon>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n set: 'bootstrap',\n icon: 'alarm',\n size: 128,\n },\n argTypes: {\n set: {\n control: { type: 'select' },\n options: ['bootstrap', 'font-awesome-brand', 'font-awesome-regular', 'font-awesome-solid'],\n },\n icon: {\n control: { type: 'text' },\n },\n size: {\n control: { type: 'number' },\n },\n }\n};\n"]}

package/dist/components/kemet-input/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-input/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-input';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Input',\n component: 'kemet-input',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n type = 'text',\n status = 'standard',\n validateOnBlur = true,\n required = true,\n pattern = '^[a-zA-Z0-9]*$',\n rounded = false,\n filled = false,\n iconLeft = '',\n iconRight = '',\n placeholder = 'Placeholder',\n minlength = null,\n maxlength = null,\n min = null,\n max = null,\n step = null,\n autocomplete = 'off',\n inputmode = 'none',\n autofocus = false,\n disabled = false,\n readonly = false,\n}) => html`<kemet-input\n type=\"${type}\"\n status=\"${status}\"\n pattern=${ifDefined(pattern !== '' ? pattern : undefined)}\n ?required=${required}\n ?validate-on-blur=${validateOnBlur}\n ?rounded=${rounded}\n ?filled=${filled}\n icon-left=${ifDefined(iconLeft !== '' ? iconLeft : undefined)}\n icon-right=${ifDefined(iconRight !== '' ? iconRight : undefined)}\n placeholder=${ifDefined(placeholder !== '' ? placeholder : undefined)}\n minlength=${ifDefined(minlength || undefined)}\n maxlength=${ifDefined(maxlength || undefined)}\n min=${ifDefined(min || undefined)}\n max=${ifDefined(max || undefined)}\n step=${ifDefined(step || undefined)}\n autocomplete=\"${autocomplete}\"\n inputmode=\"${inputmode}\"\n ?autofocus=${autofocus}\n ?disabled=${disabled}\n ?readonly=${readonly}\n></kemet-input>`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n type: 'text',\n status: 'standard',\n validateOnBlur: true,\n required: true,\n pattern: '^[a-zA-Z0-9]*$',\n rounded: false,\n filled: false,\n iconLeft: '',\n iconRight: '',\n placeholder: 'Placeholder',\n minlength: null,\n maxlength: null,\n min: null,\n max: null,\n step: null,\n autocomplete: 'off',\n inputmode: 'none',\n autofocus: false,\n disabled: false,\n readonly: false,\n },\n argTypes: {\n type: {\n name: 'Type',\n control: { type: 'select' },\n options: [\n 'text',\n 'color',\n 'date',\n 'datetime-local',\n 'email',\n 'password',\n 'hidden',\n 'month',\n 'number',\n 'reset',\n 'search',\n 'tel',\n 'time',\n 'url',\n 'week',\n ],\n },\n status: {\n control: { type: 'radio' },\n options: ['standard', 'error', 'success', 'warning'],\n },\n validateOnBlur: {\n control: { type: 'boolean' },\n },\n required: {\n control: { type: 'boolean' },\n },\n pattern: {\n control: { type: 'text' },\n },\n rounded: {\n control: { type: 'boolean' },\n },\n filled: {\n control: { type: 'boolean' },\n },\n iconLeft: {\n control: { type: 'text' },\n },\n iconRight: {\n control: { type: 'text' },\n },\n placeholder: {\n control: { type: 'text' },\n },\n minlength: {\n control: { type: 'number' },\n },\n maxlength: {\n control: { type: 'number' },\n },\n min: {\n control: { type: 'number' },\n },\n max: {\n control: { type: 'number' },\n },\n step: {\n control: { type: 'number' },\n },\n autocomplete: {\n control: { type: 'radio' },\n options: ['off', 'on'],\n },\n inputmode: {\n control: { type: 'select' },\n options: ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'],\n },\n autofocus: {\n control: { type: 'boolean' },\n },\n disabled: {\n control: { type: 'boolean' },\n },\n readonly: {\n control: { type: 'boolean' },\n },\n }\n};\n"]}

package/dist/components/kemet-modal/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,GAAG,EACd,QAAQ,GAAG,MAAM,EACjB,YAAY,GAAG,iBAAiB,EAChC,eAAe,GAAG,MAAM,EACxB,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,MAAM,EACf,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAA;;;mCAGgB,QAAQ;mCACR,QAAQ;kDACO,YAAY;0CACpB,eAAe;;;4BAG7B,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,MAAM,YAAY,MAAM,sBAAsB,YAAY;;UAE3E,YAAY,CAAC,eAAe,CAAC;;;;;GAKpC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAEhC,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE;gBACP,gBAAgB;gBAChB,aAAa;gBACb,cAAc;gBACd,WAAW;gBACX,MAAM;gBACN,WAAW;gBACX,iBAAiB;gBACjB,eAAe;gBACf,SAAS;gBACT,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,aAAa;aACd;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;IAED,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,iBAAiB;QAC/B,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Modal',\n component: 'kemet-modal',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n displayCloseBtn = true,\n minWidth = '0',\n maxWidth = 'none',\n overlayColor = 'rgba(0,0,0,0.2)',\n transitionSpeed = '0.3s',\n opened = false,\n effect = 'fall',\n closeOnClick = false,\n}) => {\n const openModal = () => {\n const modal = document.querySelector('kemet-modal');\n modal.opened = true;\n };\n\n const makeCloseBtn = (display) => {\n if (display) {\n return html`\n <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\">\n <kemet-icon icon=\"x-circle\" size=\"24\"></kemet-icon>\n </kemet-modal-close>\n `;\n }\n\n return null;\n };\n\n const temp = html`\n <style>\n kemet-modal {\n --kemet-modal-min-width: ${minWidth};\n --kemet-modal-max-width: ${maxWidth};\n --kemet-modal-overlay-background-color: ${overlayColor};\n --kemet-modal-transition-speed: ${transitionSpeed};\n }\n </style>\n <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n <kemet-modal ?opened=${opened} effect=\"${effect}\" ?close-on-click=\"${closeOnClick}\">\n <div kemet-elevation=\"layer5\" kemet-padding=\"tiny:normal\">\n ${makeCloseBtn(displayCloseBtn)}\n <h2 kemet-margin=\"tiny:none\">Modal Title</h2>\n <p>Your modal contents <a href=\"http://google.com\">here</a>.</p>\n </div>\n </kemet-modal>\n `;\n\n return temp;\n};\n\nexport const Standard: Story = {\n render: (args) => Template(args),\n\n argTypes: {\n displayCloseBtn: {\n control: { type: 'boolean' },\n },\n minWidth: {\n control: { type: 'text' },\n },\n maxWidth: {\n control: { type: 'text' },\n },\n overlayColor: {\n control: { type: 'color' },\n },\n transitionSpeed: {\n control: { type: 'text' },\n },\n opened: {\n control: { type: 'boolean' },\n },\n effect: {\n control: { type: 'select' },\n options: [\n 'fadein-scaleup',\n 'slide-right',\n 'slide-bottom',\n 'newspaper',\n 'fall',\n 'side-fall',\n 'flip-horizontal',\n 'flip-vertical',\n 'sign-3d',\n 'super-scaled',\n 'slit',\n 'rotate-bottom',\n 'rotate-left',\n ],\n },\n closeOnClick: {\n control: { type: 'boolean' },\n },\n },\n\n args: {\n displayCloseBtn: true,\n minWidth: '0',\n maxWidth: 'none',\n overlayColor: 'rgba(0,0,0,0.2)',\n transitionSpeed: '0.3s',\n opened: false,\n effect: 'fall',\n closeOnClick: false,\n },\n};\n"]}

package/dist/components/kemet-password/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;+CAGE,OAAO,WAAW,KAAK;;CAErE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE;QACD,OAAO,EAAE,iDAAiD;KAC3D;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-password';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Password',\n component: 'kemet-password',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ rules, message }) => html`\n <kemet-field slug=\"new-password\" label=\"New Password\">\n <kemet-input slot=\"input\" type=\"password\" name=\"new-password\"></kemet-input>\n <kemet-password slot=\"component\" message=${message} .rules=${rules}></kemet-password>\n </kemet-field>\n`;\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n rules: [\n { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n ],\n message: 'Please make sure you meet all the requirements.',\n },\n argTypes: {\n rules: {\n control: { type: 'array' },\n },\n message: {\n control: { type: 'text' },\n },\n }\n};\n"]}

package/dist/components/kemet-popper/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GACtG,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,IAAI,MAAM;QAAE,MAAM,CAAC,OAAO,EAAE,CAAC;IAE7B,OAAO,IAAI,CAAA;qCACwB,cAAc;8BACrB,MAAM,cAAc,SAAS,WAAW,MAAM,YAAY,MAAM,aAAa,QAAQ,aAAa,QAAQ,aAAa,QAAQ;mDAC1G,WAAW;8BAChC,UAAU,CAAC,OAAO,CAAC;;;GAG9C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,qVAAqV;QAC9V,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC;SAC5E;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC1L;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,EAAE,cAAc,CAAC;SAChH;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;SAC/B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-popper';\nimport '../kemet-popper-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Popper',\n component: 'kemet-popper',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n triggerText, content, canvasPosition, placement, opened, effect, fireOn, strategy, skidding, distance,\n}) => {\n const popper = document.querySelector('kemet-popper');\n if (popper) popper.refresh();\n\n return html`\n <div class=\"storybook__canvas--${canvasPosition}\">\n <kemet-popper ?opened=${opened} placement=${placement} effect=${effect} fire-on=${fireOn} strategy=${strategy} skidding=${skidding} distance=${distance}>\n <kemet-button type=\"text\" slot=\"trigger\">${triggerText}</kemet-button>\n <div slot=\"content\">${unsafeHTML(content)}</div>\n </kemet-popper>\n </div>\n `;\n};\n\nexport const Standard: Story = {\n render: (args: any) => Template(args),\n args: {\n triggerText: 'Click Me',\n content: '<kemet-popper-close style=\"position:absolute; right:1rem;\"><kemet-icon icon=\"x-lg\"></kemet-icon></kemet-popper-close><h2 kemet-margin-top=\"tiny:none\">Heading</h2><img width=\"240\" src=\"https://via.placeholder.com/1920x1080\" alt=\"A placeholder\" /><p><a href=\"https://google.com\">This</a> is some <a href=\"https://google.com\">content</a>.</p>',\n canvasPosition: 'middle',\n placement: 'top',\n opened: false,\n effect: 'fade',\n fireOn: 'click',\n strategy: 'fixed',\n skidding: 0,\n distance: 0,\n },\n argTypes: {\n canvasPosition: {\n control: { type: 'select' },\n options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n },\n placement: {\n control: { type: 'select' },\n options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],\n },\n opened: {\n control: { type: 'boolean' },\n },\n effect: {\n control: { type: 'select' },\n options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n },\n fireOn: {\n control: { type: 'radio' },\n options: ['hover', 'click'],\n },\n strategy: {\n control: { type: 'radio' },\n options: ['fixed', 'absolute'],\n },\n skidding: {\n control: { type: 'number' },\n },\n distance: {\n control: { type: 'number' },\n },\n },\n};\n"]}

package/dist/components/kemet-radio/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,YAAY,EACnB,MAAM,GAAG,KAAK,GACf,EAAE,EAAE,CAAC,IAAI,CAAA;yBACe,MAAM,SAAS,IAAI;8EACkC,MAAM;8EACN,MAAM;+EACL,MAAM;8EACP,MAAM;;CAEnF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACpC;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-radio';\nimport '../kemet-radios';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Radio',\n component: 'kemet-radio',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n legend = 'Legend',\n axis = 'horizontal',\n filled = false,\n}) => html`\n <kemet-radios legend=${legend} axis=${axis}>\n <kemet-radio value=\"1\" name=\"kemet-radio-button\" label=\"Item 1\" ?filled=${filled}></kemet-radio>\n <kemet-radio value=\"2\" name=\"kemet-radio-button\" label=\"Item 2\" ?filled=${filled}></kemet-radio>\n <kemet-radio value=\"3\" name=\"kemet-radio-button\" label=\"Item 3\" ?filled=${filled}></kemet-radio>\n <kemet-radio value=\"4\" name=\"kemet-radio-button\" label=\"Item 4\" ?filled=${filled}></kemet-radio>\n </kemet-radios>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n legend: 'Legend',\n axis: 'horizontal',\n filled: false,\n },\n argTypes: {\n legend: {\n control: { type: 'text' },\n },\n axis: {\n control: { type: 'radio' },\n options: ['horizontal', 'vertical'],\n },\n filled: {\n control: { type: 'boolean' },\n },\n }\n};\n"]}

package/dist/components/kemet-rotator/docs/stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,GAAG,0DAA0D,EACrE,QAAQ,GAAG,8BAA8B,EACzC,QAAQ,GAAG,yEAAyE,EACpF,MAAM,GAAG,MAAM,EACf,aAAa,GAAG,CAAC,GAClB,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;sBACE,aAAa;iBAClB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,0DAA0D;QACpE,QAAQ,EAAE,8BAA8B;QACxC,QAAQ,EAAE,yEAAyE;QACnF,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Rotator',\n component: 'kemet-rotator',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n message1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n message2 = 'Praesent ornare porta nulla.',\n message3 = 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n effect = 'fade',\n rotationSpeed = 3,\n}) => html`\n <kemet-rotator\n effect=\"${effect}\"\n .rotation-speed=${rotationSpeed}\n .messages=\"${[message1, message2, message3]}\">\n </kemet-rotator>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n args: {\n message1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n message2: 'Praesent ornare porta nulla.',\n message3: 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n effect: 'fade',\n rotationSpeed: 3,\n },\n argTypes: {\n message1: {\n control: { type: 'text' },\n },\n message2: {\n control: { type: 'text' },\n },\n message3: {\n control: { type: 'text' },\n },\n effect: {\n control: { type: 'select' },\n options: ['fade', 'flip'],\n },\n rotationSpeed: {\n control: { type: 'number' },\n },\n }\n};\n"]}