@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","$$render","consequent","consequent_1","consequent_2","consequent_3"],"mappings":";;;;;2DAAA,oBA0DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,+lBASJE,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAQ,EAAAC,CAAA,0EAQVR,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQM,EAAAE,CAAA,+HAedH,EAAS,GAAAC,EAAAG,CAAA,oCAHVR,GAAS,WACL,+BAAgCG,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,qBARPC,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAC,EAAAI,CAAA,iCAnB1BhB,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,eAJV"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n    /**\n     * Use this snippet to insert the form element of your choice\n     */\n    children?: Snippet;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n    children,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot />\n    {/if}\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","children","div","root","label_1","span","root_1","$$render","consequent","span_1","root_2","$.set_attribute","consequent_1","div_1","$.sibling","node_1","consequent_2","alternate","span_2","root_5","node_6","$.child","Loader","$$anchor","consequent_3","$.reset","$.append","consequent_4"],"mappings":";;;;;2DAWA,qBAyDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,EACTU,EAAQX,EAAAC,EAAA,WAAA,CAAA,2kBAIXW,EAAGC,GAAA,EACDC,IADFF,CAAG,MACDE,CAAK,wBAGDC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFZ,EAAe,CAAA,CAAA,MADjBY,CAAI,WADFZ,EAAe,GAAAc,EAAAC,CAAA,MAFrBJ,CAAK,UAALA,EAAK,CAAA,iBAUHK,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,SAAJE,EAAAF,OAASf,GAAM,MACbC,GAAQ,QADVc,CAAI,WADFf,EAAM,GAAIC,KAAQY,EAAAK,CAAA,QAMtBC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,kCAESZ,CAAQ,0EADdA,EAAQ,EAAAM,EAAAS,CAAA,EAAAT,EAAAU,EAAA,EAAA,MADdJ,CAAG,UAAHA,EAAG,CAAA,aASD,IAAAK,EAAAC,GAAA,EAAAC,EAAAC,EAAAH,CAAA,aAKII,GAAMC,EAAA,CAAA,KAAA,IAAA,CAAA,WADJvB,EAAS,GAAAO,EAAAiB,CAAA,eAJfC,EAAAP,CAAA,SAAAP,EAAAO,EAAA,KACKtB,GAAS,IADdsB,OAES,+BAAgCnB,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,IAPT6B,EAAAH,EAAAL,CAAA,YADEpB,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAO,EAAAoB,CAAA,aAxBvCzB,CAAG,SACDS,EAAAP,QAAWf,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,QAFTU,CAAG,MAFI"}

package/dist/components/field/Field.stories.d.ts

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Field.svelte';
+import '../textinput/Textinput.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/field/Field.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,+BAA+B,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}

package/dist/components/field/Field.stories.js

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Field.svelte';
+import '../textinput/Textinput.svelte';
 const meta = {
     title: 'Form Elements/Field',
     component: 'm-field',
@@ -21,9 +23,9 @@ const meta = {
       requirementtext=${ifDefined(args.requirementtext)}
       helptext=${ifDefined(args.helptext)}
       helpid=${ifDefined(args.helpid)}
-      isvalid=${ifDefined(args.isvalid)}
-      isinvalid=${ifDefined(args.isinvalid)}
-      isloading=${ifDefined(args.isloading)}
+      ?isvalid=${args.isvalid}
+      ?isinvalid=${args.isinvalid}
+      ?isloading=${args.isloading}
       messageid=${ifDefined(args.messageid)}
       message=${ifDefined(args.message)}
     >

package/dist/components/field/Field.svelte

@@ -1,10 +1,16 @@
 <svelte:options
   customElement={{
     tag: 'm-field',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },
+      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },
+    },
   }}
 />
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Loader from '../loader/Loader.svelte';
 
   /**
@@ -53,6 +59,10 @@
      * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
      */
     message?: string;
+    /**
+     * Use this snippet to insert the form element of your choice
+     */
+    children?: Snippet;
   }
 
   let {
@@ -66,6 +76,7 @@
     isinvalid,
     isvalid,
     isloading,
+    children,
   }: Props = $props();
 </script>
 
@@ -86,7 +97,11 @@
   {/if}
 
   <div class="mc-field__content">
-    <slot />
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot />
+    {/if}
   </div>
 
   {#if isinvalid || isvalid || isloading}

package/dist/components/field/Field.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  *
@@ -44,6 +45,10 @@ interface Props {
      * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
      */
     message?: string;
+    /**
+     * Use this snippet to insert the form element of your choice
+     */
+    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAME;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/field/README.md

@@ -16,6 +16,7 @@ A field label is a text element that identifies the purpose of an input field, p
 | `isloading` | If `true`, applies a loading state to the form field. | `boolean` |   |
 | `messageid` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` |   |
 | `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` |   |
+| `children` | Use this snippet to insert the form element of your choice | `Snippet` |   |
 
 ## Slots
 

package/dist/components/fileuploader/FileUploader.js

@@ -0,0 +1,4 @@
+import{u as Ae,c as Ie,p as Me,a as Se,b as l,A as Ve,q as n,s as k,t as V,B,f as u,g as Be,x as L,h as le,d as h,v as O,aJ as ue,j as a,w as ce,l as P,r as c,e as y,n as fe,o as me,k as ee,aI as be}from"../../custom-element.js";import{i as ve}from"../../if.js";import{e as Le,i as Oe}from"../../each.js";import{s as te}from"../../slot.js";import{s as re}from"../../attributes.js";import{b as he}from"../../this.js";import{F as Pe}from"../fileuploaderitem/FileUploaderItem.js";import{U as qe}from"../../Condition20.js";import"../../svelte-component.js";import"../button/Button.js";import"../../snippet.js";import"../loader/Loader.js";import"../divider/Divider.js";var Je=le('<span class="mc-file-uploader__input-title svelte-1hihzzl"> </span> <span class="mc-file-uploader__input-subtitle svelte-1hihzzl"> </span>',1),Ke=le('<div class="mc-file-uploader__files-list svelte-1hihzzl"></div>'),Ne=le('<div><div class="mc-file-uploader__container"><input type="file" aria-label="File input" class="mc-file-uploader__hidden-input svelte-1hihzzl"/> <div tabindex="0" role="button"><!> <div class="mc-button mc-button--outlined mc-file-uploader__button svelte-1hihzzl"><!> <span class="mc-button__label svelte-1hihzzl"> </span></div></div></div> <!></div>');const Te={hash:"svelte-1hihzzl",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-file-uploader.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1hihzzl {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1hihzzl {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1hihzzl .mc-file-uploader__button:where(.svelte-1hihzzl) {width:100%;}.mc-file-uploader__input--disabled.svelte-1hihzzl .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1hihzzl) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1hihzzl {width:25rem;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input:where(.svelte-1hihzzl) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--disabled:where(.svelte-1hihzzl) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--dragged:where(.svelte-1hihzzl) {outline-width:0.25rem;}.mc-button.svelte-1hihzzl {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1hihzzl:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1hihzzl:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1hihzzl {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1hihzzl .mc-button__label:where(.svelte-1hihzzl) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1hihzzl {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1hihzzl:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--outlined.svelte-1hihzzl {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1hihzzl:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1hihzzl:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function Ge(ae,t){Me(t,!0),Se(ae,Te);let i=l(t,"files",15),q=l(t,"accept",7),g=l(t,"multiple",7),D=l(t,"allowedextensions",7),E=l(t,"maxsize",7),J=l(t,"rules",7),f=l(t,"hasdragdrop",7,!0),K=l(t,"showfileslist",7,!0),m=l(t,"disabled",7),N=l(t,"title",7,"Drag & drop"),T=l(t,"subtitle",7,"or"),G=l(t,"uploadbuttonlabel",7,"Upload file(s)"),H=l(t,"format",7,"inline"),Q=l(t,"errormessage",7),R=l(t,"deletebuttonlabel",7),F=l(t,"information",7),W=l(t,"onvalidation",7),X=l(t,"onfilesupdate",7),U,C=L(()=>pe(i())),j,A=ce(!1),I=ce(0);function pe(e=[]){const r={};return e.forEach(o=>{const v=o.name.split(".").pop()?.toLowerCase()||"";r[o.name]={size:E()&&o.size?o.size<=E():!0,extension:D()?D().includes(v):!0,customValidation:J()?.every(p=>p(o))??!0}}),r}Ve(()=>{X()?.(i());const e=new CustomEvent("files-update",{detail:i(),bubbles:!0,composed:!0});if(U.dispatchEvent(e),i()?.length>0){W()?.(n(C));const r=new CustomEvent("validation",{detail:n(C),bubbles:!0,composed:!0});U.dispatchEvent(r)}});function ge(e){f()&&(e.preventDefault(),ue(I),O(A,!0))}function ze(e){f()&&(e.preventDefault(),ue(I,-1),n(I)===0&&O(A,!1))}function oe(e){return i()?.every(r=>r.name!==e.name)}function _e(e){const r=e.target,o=Array.from(r.files||[]).filter(oe);if(!o.length){r.value="";return}i(g()?[...i(),...o]:o.slice(0,1)),r.value=""}function xe(e){e.preventDefault()}function we(e){if(!f()||(e.preventDefault(),e.stopPropagation(),O(I,0),O(A,!1),m()))return;const r=Array.from(e.dataTransfer?.files||[]).filter(oe);r.length&&i(g()?[...i(),...r]:[r[0]])}function ke(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),j.click())}function ye(e){i(i()?.filter((r,o)=>o!==e))}function De(e){return Object.values(n(C)[e.name]??{}).every(Boolean)}var Ee={get files(){return i()},set files(e){i(e),a()},get accept(){return q()},set accept(e){q(e),a()},get multiple(){return g()},set multiple(e){g(e),a()},get allowedextensions(){return D()},set allowedextensions(e){D(e),a()},get maxsize(){return E()},set maxsize(e){E(e),a()},get rules(){return J()},set rules(e){J(e),a()},get hasdragdrop(){return f()},set hasdragdrop(e=!0){f(e),a()},get showfileslist(){return K()},set showfileslist(e=!0){K(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get title(){return N()},set title(e="Drag & drop"){N(e),a()},get subtitle(){return T()},set subtitle(e="or"){T(e),a()},get uploadbuttonlabel(){return G()},set uploadbuttonlabel(e="Upload file(s)"){G(e),a()},get format(){return H()},set format(e="inline"){H(e),a()},get errormessage(){return Q()},set errormessage(e){Q(e),a()},get deletebuttonlabel(){return R()},set deletebuttonlabel(e){R(e),a()},get information(){return F()},set information(e){F(e),a()},get onvalidation(){return W()},set onvalidation(e){W(e),a()},get onfilesupdate(){return X()},set onfilesupdate(e){X(e),a()}},z=Ne(),Y=h(z),b=h(Y);b.__change=_e,he(b,e=>j=e,()=>j);var s=k(b,2);s.__click=()=>j.click(),s.__keydown=ke;var ie=h(s);{var Fe=e=>{var r=Je(),o=P(r),v=h(o,!0);c(o);var p=k(o,2),Z=h(p,!0);c(p),V(()=>{y(v,N()),y(Z,T())}),u(e,r)};ve(ie,e=>{f()&&e(Fe)})}var ne=k(ie,2),se=h(ne);qe(se,{className:"mc-button__icon"});var de=k(se,2),Ue=h(de,!0);c(de),c(ne),c(s),c(Y);var Ce=k(Y,2);{var je=e=>{var r=Ke();Le(r,21,i,Oe,(o,v,p)=>{{let Z=L(()=>De(n(v)));Pe(o,{get file(){return n(v)},get format(){return H()},get errormessage(){return Q()},get information(){return F()},get deletebuttonlabel(){return R()},get valid(){return n(Z)},ondelete:()=>ye(p),$$slots:{name:(_,M)=>{var d=ee(),x=P(d);const S=L(()=>M.file);te(x,t,"name",{get file(){return n(S)}},$=>{var w=be();V(()=>y(w,n(S).name)),u($,w)}),u(_,d)},information:(_,M)=>{var d=ee(),x=P(d);const S=L(()=>M.file);te(x,t,"information",{get file(){return n(S)}},$=>{var w=be();V(()=>y(w,F())),u($,w)}),u(_,d)},errorMessage:(_,M)=>{var d=ee(),x=P(d);te(x,t,"errorMessage",{get validationState(){return n(C)[n(v).name]}},null),u(_,d)}}})}}),c(r),u(e,r)};ve(Ce,e=>{K()&&e(je)})}return c(z),he(z,e=>U=e,()=>U),V(()=>{fe(z,1,me({"mc-file-uploader":!0,"mc-file-uploader--draggable":f()}),"svelte-1hihzzl"),re(b,"accept",q()),b.multiple=g(),b.disabled=m(),re(b,"aria-disabled",m()),fe(s,1,me({"mc-file-uploader__input":!0,"mc-file-uploader__input--dragged":n(A),"mc-file-uploader__input--disabled":m()}),"svelte-1hihzzl"),re(s,"aria-disabled",m()),y(Ue,G())}),B("dragover",s,xe),B("drop",s,we),B("dragenter",s,ge),B("dragleave",s,ze),u(ae,z),Be(Ee)}Ae(["change","click","keydown"]);customElements.define("m-file-uploader",Ie(Ge,{files:{},accept:{},multiple:{},allowedextensions:{},maxsize:{},rules:{},hasdragdrop:{},showfileslist:{},disabled:{},title:{},subtitle:{},uploadbuttonlabel:{},format:{},errormessage:{},deletebuttonlabel:{},information:{},onvalidation:{},onfilesupdate:{}},["name","information","errorMessage"],[],!0));
+//# sourceMappingURL=FileUploader.js.map

package/dist/components/fileuploader/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sources":["../../../src/components/fileuploader/FileUploader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-file-uploader' }} />\n\n<script lang=\"ts\">\n  import FileUploaderItem, {\n    type NormalizedFile,\n  } from '../fileuploaderitem/FileUploaderItem.svelte';\n  import { Upload24 } from '@mozaic-ds/icons-svelte';\n\n  type FilesValidationState = Record<\n    string,\n    { size: boolean; extension: boolean; customValidation: boolean }\n  >;\n\n  /**\n   * A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.\n   *\n   * @slot name - Use this slot to display a custom file name.\n   * @slot information - Use this slot to display a custom information content.\n   * @slot errorMessage - Use this slot to display a custom error message.\n   * @event files-update {CustomEvent<NormalizedFile[]>} - Emits when files list changes.\n   * @event validation {CustomEvent<FilesValidationState>} - Emits files validation when files list changes.\n   */\n\n  interface Props {\n    /**\n     * Model binding for the selected files (`NormalizedFile`)\n     */\n    files: NormalizedFile[];\n    /**\n     * File types allowed by the uploader.\n     */\n    accept?: HTMLInputElement['accept'];\n    /**\n     * Enables selecting multiple files at once.\n     */\n    multiple?: boolean;\n    /**\n     * File extensions to validate.\n     */\n    allowedextensions?: string[];\n    /**\n     * Maximum file size allowed (in bytes).\n     */\n    maxsize?: number;\n    /**\n     * Custom validation rules applied to each file.\n     */\n    rules?: ((file: NormalizedFile) => boolean)[];\n    /**\n     * Layout format of the item.\n     */\n    format?: 'inline' | 'stacked';\n    /**\n     * Custom error message for the file.\n     */\n    errormessage?: string;\n    /**\n     * Label for the delete button.\n     */\n    deletebuttonlabel?: string;\n    /**\n     * Optional informational text displayed under the file name.\n     */\n    information?: string;\n    /**\n     * Enables drag & drop functionality.\n     */\n    hasdragdrop?: boolean;\n    /**\n     * Controls the display of the uploaded files list.\n     */\n    showfileslist?: boolean;\n    /**\n     * Disables the whole component.\n     */\n    disabled?: boolean;\n    /**\n     * Main drag & drop title.\n     */\n    title?: string;\n    /**\n     * Subtitle used in the drag & drop area.\n     */\n    subtitle?: string;\n    /**\n     * Label of the upload button.\n     */\n    uploadbuttonlabel?: string;\n    /**\n     * Callback to call when files validation is updated.\n     */\n    onvalidation?: (validationState: FilesValidationState) => void;\n    /**\n     * Callback to call when files are updates.\n     */\n    onfilesupdate?: (files: NormalizedFile[]) => void;\n  }\n\n  let {\n    files = $bindable(),\n    accept,\n    multiple,\n    allowedextensions,\n    maxsize,\n    rules,\n    hasdragdrop = true,\n    showfileslist = true,\n    disabled,\n    title = 'Drag & drop',\n    subtitle = 'or',\n    uploadbuttonlabel = 'Upload file(s)',\n    format = 'inline',\n    errormessage,\n    deletebuttonlabel,\n    information,\n    onvalidation,\n    onfilesupdate,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  let filesValidationState = $derived(validateFiles(files));\n\n  let fileInput: HTMLInputElement;\n\n  let isDraggedOver = $state(false);\n  let dragCounter = $state(0);\n\n  function validateFiles(newFiles: NormalizedFile[] = []) {\n    const state: FilesValidationState = {};\n    newFiles.forEach((file) => {\n      const extension = file.name.split('.').pop()?.toLowerCase() || '';\n      state[file.name] = {\n        size: maxsize && file.size ? file.size <= maxsize : true,\n        extension: allowedextensions ? allowedextensions.includes(extension) : true,\n        customValidation: rules?.every((rule) => rule(file)) ?? true,\n      };\n    });\n    return state;\n  }\n\n  $effect(() => {\n    onfilesupdate?.(files);\n    const event = new CustomEvent('files-update', {\n      detail: files,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n\n    if (files?.length > 0) {\n      onvalidation?.(filesValidationState);\n\n      const event = new CustomEvent('validation', {\n        detail: filesValidationState,\n        bubbles: true,\n        composed: true,\n      });\n      element.dispatchEvent(event);\n    }\n  });\n\n  function onDragEnter(e: Event) {\n    if (!hasdragdrop) return;\n\n    e.preventDefault();\n    dragCounter++;\n    isDraggedOver = true;\n  }\n\n  function onDragLeave(e: Event) {\n    if (!hasdragdrop) return;\n\n    e.preventDefault();\n    dragCounter--;\n    if (dragCounter === 0) isDraggedOver = false;\n  }\n\n  function filterExistingFile(file: NormalizedFile) {\n    return files?.every((item) => item.name !== file.name);\n  }\n\n  function onChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    const newFiles = Array.from(input.files || []).filter(filterExistingFile);\n\n    if (!newFiles.length) {\n      input.value = '';\n      return;\n    }\n\n    files = multiple ? [...files, ...newFiles] : newFiles.slice(0, 1);\n\n    input.value = '';\n  }\n\n  function onDragover(e: DragEvent) {\n    e.preventDefault();\n  }\n\n  function onDrop(e: DragEvent) {\n    if (!hasdragdrop) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounter = 0;\n    isDraggedOver = false;\n    if (disabled) return;\n\n    const droppedFiles = Array.from(e.dataTransfer?.files || []).filter(filterExistingFile);\n    if (!droppedFiles.length) return;\n\n    files = multiple ? [...files, ...droppedFiles] : [droppedFiles[0]];\n  }\n\n  function onKeydown(e: KeyboardEvent) {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      fileInput.click();\n    }\n  }\n\n  function onDelete(index: number) {\n    files = files?.filter((_, i) => i !== index);\n  }\n\n  function isFileValid(file: NormalizedFile) {\n    return Object.values(filesValidationState[file.name] ?? {}).every(Boolean);\n  }\n</script>\n\n<div\n  class={{\n    'mc-file-uploader': true,\n    'mc-file-uploader--draggable': hasdragdrop,\n  }}\n  bind:this={element}\n>\n  <div class=\"mc-file-uploader__container\">\n    <input\n      bind:this={fileInput}\n      type=\"file\"\n      aria-label=\"File input\"\n      {accept}\n      {multiple}\n      class=\"mc-file-uploader__hidden-input\"\n      {disabled}\n      aria-disabled={disabled}\n      onchange={onChange}\n    />\n\n    <div\n      class={{\n        'mc-file-uploader__input': true,\n        'mc-file-uploader__input--dragged': isDraggedOver,\n        'mc-file-uploader__input--disabled': disabled,\n      }}\n      tabindex=\"0\"\n      role=\"button\"\n      aria-disabled={disabled}\n      ondragover={onDragover}\n      ondrop={onDrop}\n      ondragenter={onDragEnter}\n      ondragleave={onDragLeave}\n      onclick={() => fileInput!.click()}\n      onkeydown={onKeydown}\n    >\n      {#if hasdragdrop}\n        <span class=\"mc-file-uploader__input-title\">\n          {title}\n        </span>\n\n        <span class=\"mc-file-uploader__input-subtitle\">\n          {subtitle}\n        </span>\n      {/if}\n\n      <div class=\"mc-button mc-button--outlined mc-file-uploader__button\">\n        <Upload24 className=\"mc-button__icon\" />\n        <span class=\"mc-button__label\">\n          {uploadbuttonlabel}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  {#if showfileslist}\n    <div class=\"mc-file-uploader__files-list\">\n      {#each files as file, index (index)}\n        <FileUploaderItem\n          {file}\n          {format}\n          {errormessage}\n          {information}\n          {deletebuttonlabel}\n          valid={isFileValid(file)}\n          ondelete={() => onDelete(index)}\n        >\n          <slot slot=\"name\" name=\"name\" let:file {file}>\n            {file.name}\n          </slot>\n\n          <slot slot=\"information\" name=\"information\" let:file {file}>\n            {information}\n          </slot>\n\n          <slot\n            slot=\"errorMessage\"\n            name=\"errorMessage\"\n            validationState={filesValidationState[file.name]}\n          ></slot>\n        </FileUploaderItem>\n      {/each}\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/file-uploader';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["files","$.prop","$$props","accept","multiple","allowedextensions","maxsize","rules","hasdragdrop","showfileslist","disabled","title","subtitle","uploadbuttonlabel","format","errormessage","deletebuttonlabel","information","onvalidation","onfilesupdate","element","filesValidationState","$.derived","validateFiles","fileInput","isDraggedOver","$.state","dragCounter","newFiles","state","file","extension","rule","$.user_effect","event","onDragEnter","$.set","onDragLeave","$.get","filterExistingFile","item","onChange","input","onDragover","onDrop","droppedFiles","onKeydown","onDelete","index","_","i","isFileValid","div","root","div_1","$.child","input_1","$$value","div_2","$.sibling","node","span","$.first_child","fragment","span_1","$$render","consequent","div_3","Upload24","node_1","span_2","$.reset","div_4","root_2","$.index","$$anchor","$0","FileUploaderItem","$.template_effect","$.set_text","text_3","consequent_1","$.set_attribute","$.event","$.append"],"mappings":"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"}

package/dist/components/fileuploader/FileUploader.spec.js

@@ -0,0 +1,134 @@
+import { render, fireEvent, waitFor } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import FileUploader from './FileUploader.svelte';
+// Helper to create a File object
+function createFile(name = 'file.txt', content = 'hello', type = 'text/plain') {
+    return new File([content], name, { type });
+}
+describe('FileUploader component', () => {
+    it('adds file when input changes and shows file name in list', async () => {
+        const { container, getByText } = render(FileUploader, { files: [] });
+        const input = container.querySelector('input[type="file"]');
+        expect(input).toBeTruthy();
+        const file = createFile('test.txt', 'content', 'text/plain');
+        Object.defineProperty(input, 'files', {
+            value: [file],
+            writable: false,
+        });
+        await fireEvent.change(input);
+        await waitFor(() => {
+            expect(getByText('test.txt')).toBeTruthy();
+        });
+    });
+    it('prevents duplicate files (same name) when adding twice', async () => {
+        const { container, getAllByText } = render(FileUploader, { files: [] });
+        const input = container.querySelector('input[type="file"]');
+        const file = createFile('duplicate.txt');
+        Object.defineProperty(input, 'files', { value: [file], writable: false, configurable: true });
+        await fireEvent.change(input);
+        // Try adding same file again
+        Object.defineProperty(input, 'files', { value: [file], writable: false, configurable: true });
+        await fireEvent.change(input);
+        const matches = getAllByText('duplicate.txt');
+        // Should only be listed once
+        expect(matches.length).toBe(1);
+    });
+    it('dispatches validation event and calls onvalidation callback with correct validation state', async () => {
+        const onvalidation = vi.fn();
+        const { container } = render(FileUploader, {
+            files: [],
+            allowedextensions: ['png'],
+            maxsize: 5, // bytes -> make file too big
+            onvalidation,
+        });
+        const uploaderEl = container.querySelector('.mc-file-uploader');
+        let validationEventDetail = null;
+        uploaderEl.addEventListener('validation', (e) => {
+            validationEventDetail = e.detail;
+        });
+        const input = container.querySelector('input[type="file"]');
+        const file = createFile('image.jpg', 'content'); // extension jpg not allowed, size > 5
+        Object.defineProperty(input, 'files', { value: [file], writable: false });
+        await fireEvent.change(input);
+        await waitFor(() => {
+            // callback should have been called
+            expect(onvalidation).toHaveBeenCalled();
+            // event should have been dispatched with validation state
+            expect(validationEventDetail).toBeTruthy();
+            // file key should exist
+            expect(validationEventDetail['image.jpg']).toBeDefined();
+            // extension should be false
+            expect(validationEventDetail['image.jpg'].extension).toBe(false);
+            // size should be false because maxsize is tiny
+            expect(validationEventDetail['image.jpg'].size).toBe(false);
+        });
+    });
+    it('supports drop to add files and allows deleting an item', async () => {
+        const { container, getByText, queryByText } = render(FileUploader, {
+            files: [],
+            format: 'stacked',
+            deletebuttonlabel: 'Delete',
+        });
+        const dropZone = container.querySelector('.mc-file-uploader__input');
+        const file = createFile('to-delete.txt');
+        await fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files'],
+            },
+        });
+        await waitFor(() => {
+            expect(getByText('to-delete.txt')).toBeTruthy();
+        });
+        // Find a button with delete label and click it to remove the file
+        const deleteButton = getByText('Delete');
+        expect(deleteButton).toBeTruthy();
+        await fireEvent.click(deleteButton);
+        await waitFor(() => {
+            expect(queryByText('to-delete.txt')).toBeNull();
+        });
+    });
+    it('adds dragged class on dragenter and removes it after matching dragleave calls', async () => {
+        const { container } = render(FileUploader);
+        const input = container.querySelector('.mc-file-uploader__input');
+        expect(input).toBeTruthy();
+        // first enter -> dragged
+        await fireEvent.dragEnter(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(true);
+        // second enter -> still dragged (counter increment)
+        await fireEvent.dragEnter(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(true);
+        // one leave -> still dragged (counter not zero)
+        await fireEvent.dragLeave(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(true);
+        // final leave -> not dragged
+        await fireEvent.dragLeave(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(false);
+    });
+    it('ignores drag events when hasdragdrop is false', async () => {
+        const { container } = render(FileUploader, { hasdragdrop: false });
+        const input = container.querySelector('.mc-file-uploader__input');
+        expect(input).toBeTruthy();
+        await fireEvent.dragEnter(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(false);
+        await fireEvent.dragLeave(input);
+        expect(input.classList.contains('mc-file-uploader__input--dragged')).toBe(false);
+    });
+    it('keyboard "Enter" or " " triggers file input click', async () => {
+        const { container } = render(FileUploader, { files: [] });
+        const dropZone = container.querySelector('.mc-file-uploader__input');
+        const input = container.querySelector('input[type="file"]');
+        expect(input).toBeTruthy();
+        const clickSpy = vi.spyOn(input, 'click');
+        // press Enter
+        await fireEvent.keyDown(dropZone, { key: 'Enter' });
+        // press Space
+        await fireEvent.keyDown(dropZone, { key: ' ' });
+        expect(clickSpy).toHaveBeenCalled();
+        clickSpy.mockRestore();
+    });
+    it('does not render files list if showfileslist is false', () => {
+        const { container } = render(FileUploader, { props: { files: [], showfileslist: false } });
+        expect(container.querySelector('.mc-file-uploader__files-list')).toBeNull();
+    });
+});

package/dist/components/fileuploader/FileUploader.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './FileUploader.svelte';
+import '../fileuploaderitem/FileUploaderItem.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithoutDragAndDrop: {
+    args: {
+        hasdragdrop: boolean;
+    };
+};
+export declare const Disabled: Story;
+export declare const InlineFileWithError: Story;
+export declare const StackedFileItem: Story;
+export declare const StackedFileWithError: Story;
+//# sourceMappingURL=FileUploader.stories.d.ts.map

package/dist/components/fileuploader/FileUploader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/fileuploader/FileUploader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6CAA6C,CAAC;AAErD,QAAA,MAAM,IAAI,EAAE,IAiFX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAwBlC,CAAC"}

package/dist/components/fileuploader/FileUploader.stories.js

@@ -0,0 +1,172 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './FileUploader.svelte';
+import '../fileuploaderitem/FileUploaderItem.svelte';
+const meta = {
+    title: 'Form elements/File uploader',
+    component: 'm-file-uploader',
+    subcomponents: { 'm-file-uploader-item': 'm-file-uploader-item' },
+    tags: ['v2'],
+    args: {
+        id: 'id',
+        files: [],
+        label: 'Label',
+        helptext: 'Help text',
+        helpid: 'helpid',
+        necessityindicator: '(required)',
+        hasdragdrop: true,
+        showfileslist: true,
+        disabled: false,
+        title: 'Drag & drop',
+        subtitle: 'or',
+        uploadbuttonlabel: 'Upload file(s)',
+        multiple: true,
+        deletebuttonlabel: 'Delete',
+        information: 'Additional file information',
+        errormessage: 'Error message (Be concise and use comprehensive words).',
+    },
+    argTypes: {
+        files: {
+            description: 'Model binding for the selected files',
+            table: {
+                type: {
+                    summary: '{ name: string; size?: number; type?: HTMLInputElement["accept"]}[]',
+                },
+            },
+        },
+        format: {
+            control: 'radio',
+            options: ['inline', 'stacked'],
+        },
+        name: {
+            description: 'Slot for customizing the file name display.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        information: {
+            description: 'Slot for displaying additional file information.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        errormessage: {
+            description: 'Slot for providing a custom error message.',
+            table: {
+                category: 'Slots',
+            },
+        },
+    },
+    render: (args) => {
+        return html `
+      <m-file-uploader
+        id="${args.id}"
+        .files="${args.files}"
+        label="${args.label}"
+        helptext="${ifDefined(args.helptext)}"
+        helpid="${ifDefined(args.helpid)}"
+        necessityindicator="${ifDefined(args.necessityindicator)}"
+        .hasdragdrop="${ifDefined(args.hasdragdrop)}"
+        .showfileslist="${ifDefined(args.showfileslist)}"
+        .disabled="${ifDefined(args.disabled)}"
+        title="${ifDefined(args.title)}"
+        subtitle="${ifDefined(args.subtitle)}"
+        uploadbuttonlabel="${ifDefined(args.uploadbuttonlabel)}"
+        .multiple="${ifDefined(args.multiple)}"
+        deletebuttonlabel="${ifDefined(args.deletebuttonlabel)}"
+        information="${ifDefined(args.information)}"
+        errormessage="${ifDefined(args.errormessage)}"
+        format="${ifDefined(args.format)}"
+        @validation="${action('validation')}"
+        @files-update="${action('files-update')}"
+      >
+      </m-file-uploader>
+    `;
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const WithoutDragAndDrop = {
+    args: {
+        hasdragdrop: false,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+export const InlineFileWithError = {
+    args: {
+        valid: false,
+        file: {
+            name: 'File.txt',
+        },
+        information: 'Additional information',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          information="${args.information}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};
+export const StackedFileItem = {
+    args: {
+        valid: true,
+        file: {
+            name: 'File.txt',
+        },
+        format: 'stacked',
+        information: 'Additional information',
+        deletebuttonlabel: 'Delete',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          format="${args.format}"
+          information="${args.information}"
+          deletebuttonlabel="${args.deletebuttonlabel}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};
+export const StackedFileWithError = {
+    args: {
+        valid: false,
+        file: {
+            name: 'File.txt',
+        },
+        format: 'stacked',
+        information: 'Additional information',
+        deletebuttonlabel: 'Delete',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          format="${args.format}"
+          information="${args.information}"
+          deletebuttonlabel="${args.deletebuttonlabel}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};