@mozaic-ds/web-components 1.0.0-alpha.0 → 1.0.0-alpha.2

package/public/components/select/Select.svelte

@@ -1,34 +1,41 @@
-<svelte:options customElement="" />
+<svelte:options
+  customElement={{
+    tag: 'm-select',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
 
   import type { SelectOption, SelectSize } from './select.types';
 
-  export let id: string;
-  export let name: string;
-  export let valueselected = '';
-  export let placeholder: string;
-  export let size: SelectSize = 'm';
-  export let isinvalid = false;
-  export let disabled = false;
-  export let options: string;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  const forwardEvents = createEventForwarder(get_current_component());
-  let valueSelected = '';
+  interface Props {
+    id: string;
+    name: string;
+    valueselected?: string;
+    placeholder: string;
+    size?: SelectSize;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    options: Array<SelectOption>;
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    valueselected = '',
+    placeholder,
+    size = 'm',
+    isinvalid = false,
+    disabled = false,
+    options,
+  }: Props = $props();
+  let valueSelected = $state(valueselected);
 
-  $: parsedOptions = options ? (JSON.parse(options) as SelectOption[]) : [];
-  $: valueSelected = valueselected;
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
   function setClasses(isinvalid: boolean, size: SelectSize): string {
     const classes = ['mc-select'];
 
@@ -43,15 +50,12 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-no-onchange -->
+<!-- svelte-ignore a11y_no_onchange -->
 <select
-  use:forwardEvents
   {id}
-  class="{setClasses(isinvalid, size)} {userClass}"
+  class={setClasses(isinvalid, size)}
   {disabled}
   bind:value={valueSelected}
-  on:change={() => eventHandler.dispatch('change', valueSelected)}
-  {...attributes}
 >
   {#if placeholder}
     <option value="" disabled selected>
@@ -59,7 +63,7 @@
     </option>
   {/if}
 
-  {#each parsedOptions as opt}
+  {#each options as opt}
     <option disabled={opt.disabled} value={opt.value}>
       {opt.text}
     </option>

package/public/components/statusbadge/StatusBadge.js

@@ -1,2 +1,2 @@
-import{c as s,S as t,i as e,f as a,s as o,a as r,z as c,e as l,r as n,b as d,d as u,g as m,u as g,h as b,A as i,B as f,C as v,j as x,k as $,m as k,v as p}from"../../index-c0bfe08f.js";import h from"./StatusDot.js";function w(s){r(s,"svelte-1x1mo7s",".mc-status-badge.svelte-1x1mo7s{background-color:var(--status-badge-color-background-information, #e1f3f9);border-radius:0.25rem;font-weight:400;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem}.mc-status-badge__label.svelte-1x1mo7s{color:var(--status-badge-color-label, #000000)}.mc-status-badge__label.svelte-1x1mo7s::first-letter{text-transform:uppercase}.mc-status-badge--success.svelte-1x1mo7s{background-color:var(--status-badge-color-background-success, #ebf5de)}.mc-status-badge--danger.svelte-1x1mo7s{background-color:var(--status-badge-color-background-danger, #fdeaea)}.mc-status-badge--warning.svelte-1x1mo7s{background-color:var(--status-badge-color-background-warning, #fdf1e8)}.mc-status-badge--neutral.svelte-1x1mo7s{background-color:var(--status-badge-color-background-neutral, #e6e6e6)}.mc-status-dot.svelte-1x1mo7s{background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block}.mc-status-dot--s.svelte-1x1mo7s{height:0.25rem;width:0.25rem}.mc-status-dot--l.svelte-1x1mo7s{height:1rem;width:1rem}.mc-status-dot--success.svelte-1x1mo7s{background-color:var(--status-dot-color-background-success, #117f03)}.mc-status-dot--danger.svelte-1x1mo7s{background-color:var(--status-dot-color-background-danger, #c61112)}.mc-status-dot--warning.svelte-1x1mo7s{background-color:var(--status-dot-color-background-warning, #b64f00)}.mc-status-dot--neutral.svelte-1x1mo7s{background-color:var(--status-dot-color-background-neutral, #666666)}")}function y(s){let t,e,a,o,r,w;e=new h({props:{style:s[0],size:"m"}});const y=s[2].default,_=c(y,s,s[1],null);return{c(){t=l("div"),n(e.$$.fragment),a=d(),o=l("span"),_&&_.c(),u(o,"class","mc-status-badge__label svelte-1x1mo7s"),u(t,"class",r="mc-status-badge "+(s[0]?`mc-status-badge--${s[0]}`:"")+" svelte-1x1mo7s")},m(s,r){m(s,t,r),g(e,t,null),b(t,a),b(t,o),_&&_.m(o,null),w=!0},p(s,[a]){const o={};1&a&&(o.style=s[0]),e.$set(o),_&&_.p&&(!w||2&a)&&i(_,y,s,s[1],w?v(y,s[1],a,null):f(s[1]),null),(!w||1&a&&r!==(r="mc-status-badge "+(s[0]?`mc-status-badge--${s[0]}`:"")+" svelte-1x1mo7s"))&&u(t,"class",r)},i(s){w||(x(e.$$.fragment,s),x(_,s),w=!0)},o(s){$(e.$$.fragment,s),$(_,s),w=!1},d(s){s&&k(t),p(e),_&&_.d(s)}}}function _(s,t,e){let{$$slots:a={},$$scope:o}=t,{style:r}=t;return s.$$set=s=>{"style"in s&&e(0,r=s.style),"$$scope"in s&&e(1,o=s.$$scope)},[r,o,a]}class j extends t{constructor(s){super(),e(this,s,_,y,o,{style:0},w)}get style(){return this.$$.ctx[0]}set style(s){this.$$set({style:s}),a()}}s(j,{style:{}},["default"],[],!0);export{j as default};
+import{c as s,p as t,a,b as e,t as o,g as r,l as c,d,h as l,i as u,j as n,r as m,s as g}from"../../custom-element-D6iR2OWc.js";import{a as b}from"../../slot-snFjRYH3.js";import i from"./StatusDot.js";var v=o('<div><!> <span class="mc-status-badge__label svelte-1x1mo7s"><!></span></div>');const f={hash:"svelte-1x1mo7s",code:"/**\n * Do not edit directly, this file was auto-generated.\n */.mc-status-badge.svelte-1x1mo7s {background-color:var(--status-badge-color-background-information, #e1f3f9);border-radius:0.25rem;font-weight:400;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1x1mo7s {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1x1mo7s::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1x1mo7s {background-color:var(--status-badge-color-background-success, #ebf5de);}.mc-status-badge--danger.svelte-1x1mo7s {background-color:var(--status-badge-color-background-danger, #fdeaea);}.mc-status-badge--warning.svelte-1x1mo7s {background-color:var(--status-badge-color-background-warning, #fdf1e8);}.mc-status-badge--neutral.svelte-1x1mo7s {background-color:var(--status-badge-color-background-neutral, #e6e6e6);}.mc-status-dot.svelte-1x1mo7s {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-1x1mo7s {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1x1mo7s {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1x1mo7s {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-1x1mo7s {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-1x1mo7s {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-1x1mo7s {background-color:var(--status-dot-color-background-neutral, #666666);}"};function k(s,o){t(o,!0),a(s,f);let k=e(o,"style",7);var x=v(),h=r(x);i(h,{get style(){return k()},size:"m"});var p=c(h,2),w=r(p);return b(w,o,"default",{}),m(p),m(x),d((()=>g(x,1,`mc-status-badge ${(k()?`mc-status-badge--${k()}`:"")??""}`,"svelte-1x1mo7s"))),l(s,x),u({get style(){return k()},set style(s){k(s),n()}})}customElements.define("m-status-badge",s(k,{style:{}},["default"],[],!0));export{k as default};
 //# sourceMappingURL=StatusBadge.js.map

package/public/components/statusbadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: '' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle } from './badge.types';\n  import StatusDot from './StatusDot.svelte';\n\n  export let style: BadgeStyle;\n</script>\n\n<div class=\"mc-status-badge {style ? `mc-status-badge--${style}` : ''}\">\n  <StatusDot {style} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","span","style","$$props"],"mappings":"inEAS6BA,EAAK,uBAAuBA,EAAK,KAAK,IAAE,2BAArEC,EAGKC,EAAAC,EAAAC,sBADHC,EAAmDF,EAAAG,gLAFxBN,EAAK,uBAAuBA,EAAK,KAAK,IAAE,yMAHxDO,GAAiBC"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle } from './badge.types';\n  import StatusDot from './StatusDot.svelte';\n\n  interface Props {\n    style: BadgeStyle;\n  }\n\n  let { style }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {style ? `mc-status-badge--${style}` : ''}\">\n  <StatusDot {style} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props"],"mappings":"sjEAUQA,EAAKC,EAAAC,EAAA,QAAA,sJAGgBF,IAAK,oBAAuBA,MAAU,KAAE,KAAA"}

package/public/components/statusbadge/StatusBadge.svelte

@@ -1,10 +1,14 @@
-<svelte:options customElement={{ tag: '' }} />
+<svelte:options customElement={{ tag: 'm-status-badge' }} />
 
 <script lang="ts">
   import type { BadgeStyle } from './badge.types';
   import StatusDot from './StatusDot.svelte';
 
-  export let style: BadgeStyle;
+  interface Props {
+    style: BadgeStyle;
+  }
+
+  let { style }: Props = $props();
 </script>
 
 <div class="mc-status-badge {style ? `mc-status-badge--${style}` : ''}">

package/public/components/statusbadge/StatusDot.js

@@ -1,2 +1,2 @@
-import{c as s,S as t,i as e,f as a,s as o,a as r,e as c,d as u,g as d,y as l,m as i}from"../../index-c0bfe08f.js";function n(s){r(s,"svelte-bwqsm9",".mc-status-dot.svelte-bwqsm9{background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block}.mc-status-dot--s.svelte-bwqsm9{height:0.25rem;width:0.25rem}.mc-status-dot--l.svelte-bwqsm9{height:1rem;width:1rem}.mc-status-dot--success.svelte-bwqsm9{background-color:var(--status-dot-color-background-success, #117f03)}.mc-status-dot--danger.svelte-bwqsm9{background-color:var(--status-dot-color-background-danger, #c61112)}.mc-status-dot--warning.svelte-bwqsm9{background-color:var(--status-dot-color-background-warning, #b64f00)}.mc-status-dot--neutral.svelte-bwqsm9{background-color:var(--status-dot-color-background-neutral, #666666)}")}function m(s){let t,e;return{c(){t=c("div"),u(t,"class",e="mc-status-dot "+(s[1]?`mc-status-dot--${s[1]}`:"")+" "+(s[0]?`mc-status-dot--${s[0]}`:"")+" svelte-bwqsm9")},m(s,e){d(s,t,e)},p(s,[a]){3&a&&e!==(e="mc-status-dot "+(s[1]?`mc-status-dot--${s[1]}`:"")+" "+(s[0]?`mc-status-dot--${s[0]}`:"")+" svelte-bwqsm9")&&u(t,"class",e)},i:l,o:l,d(s){s&&i(t)}}}function b(s,t,e){let{style:a}=t,{size:o}=t;return s.$$set=s=>{"style"in s&&e(0,a=s.style),"size"in s&&e(1,o=s.size)},[a,o]}class g extends t{constructor(s){super(),e(this,s,b,m,o,{style:0,size:1},n)}get style(){return this.$$.ctx[0]}set style(s){this.$$set({style:s}),a()}get size(){return this.$$.ctx[1]}set size(s){this.$$set({size:s}),a()}}s(g,{style:{},size:{}},[],[],!1);export{g as default};
+import{c as t,p as s,a as e,b as a,t as o,d as r,h as c,i as d,j as u,s as l}from"../../custom-element-D6iR2OWc.js";var n=o("<div></div>");const m={hash:"svelte-bwqsm9",code:"/**\n * Do not edit directly, this file was auto-generated.\n */.mc-status-dot.svelte-bwqsm9 {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-bwqsm9 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-bwqsm9 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-bwqsm9 {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-bwqsm9 {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-bwqsm9 {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-bwqsm9 {background-color:var(--status-dot-color-background-neutral, #666666);}"};function i(t,o){s(o,!0),e(t,m);let i=a(o,"style",7),b=a(o,"size",7);var g=n();return r((()=>l(g,1,`mc-status-dot ${(b()?`mc-status-dot--${b()}`:"")??""}  ${(i()?`mc-status-dot--${i()}`:"")??""}`,"svelte-bwqsm9"))),c(t,g),d({get style(){return i()},set style(t){i(t),u()},get size(){return b()},set size(t){b(t),u()}})}customElements.define("m-status-dot",t(i,{style:{},size:{}},[],[],!1));export{i as default};
 //# sourceMappingURL=StatusDot.js.map

package/public/components/statusbadge/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusbadge/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: '', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n\n  export let style: BadgeStyle;\n  export let size: BadgeSize;\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style\n    ? `mc-status-dot--${style}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["ctx","insert","target","div","anchor","style","$$props","size"],"mappings":"26BAUwBA,EAAI,qBAAqBA,EAAI,KAAK,IAAM,KAAAA,EAAA,qBACxCA,EAAK,KACvB,IAAE,0BAHRC,EAIMC,EAAAC,EAAAC,2CAHkBJ,EAAI,qBAAqBA,EAAI,KAAK,IAAM,KAAAA,EAAA,qBACxCA,EAAK,KACvB,IAAE,sFAPKK,GAAiBC,QACjBC,GAAeD"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusbadge/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n\n  interface Props {\n    style: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { style, size }: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style\n    ? `mc-status-dot--${style}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props","size"],"mappings":"0+BAUQA,EAAKC,EAAAC,EAAA,QAAA,GAAEC,EAAIF,EAAAC,EAAA,OAAA,mDAIKC,IAAI,kBAAqBA,MAAS,aAAMH,IACxC,kBAAAA,MAClB,KAAE,KAAA"}

package/public/components/statusdot/StatusDot.svelte

@@ -1,10 +1,14 @@
-<svelte:options customElement={{ tag: '', shadow: 'none' }} />
+<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />
 
 <script lang="ts">
   import type { BadgeStyle, BadgeSize } from './badge.types';
 
-  export let style: BadgeStyle;
-  export let size: BadgeSize;
+  interface Props {
+    style: BadgeStyle;
+    size: BadgeSize;
+  }
+
+  let { style, size }: Props = $props();
 </script>
 
 <div

package/public/components/textarea/Textarea.js

@@ -1,2 +1,2 @@
-import{c as e,S as a,i as l,f as t,s as i,a as r,p as s,e as o,E as n,t as d,g as c,O as m,I as f,L as v,y as h,m as g,M as x,n as w,K as u,P as p,q as b}from"../../index-c0bfe08f.js";import{g as _}from"../../spread-ed04f539.js";import{c as $}from"../../EventForward-bb916157.js";import{E as y}from"../../EventHandler-f7ee47ca.js";function k(e){r(e,"svelte-9faswx",".mc-field__label.svelte-9faswx,.mc-field__legend.svelte-9faswx{font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000)}.mc-field__legend.svelte-9faswx{padding-left:0;padding-right:0}.mc-field__requirement.svelte-9faswx,.mc-field__help.svelte-9faswx{font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help.svelte-9faswx{display:block;margin-top:0.125rem}.mc-field__content.svelte-9faswx{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__content__container--inline.svelte-9faswx,.mc-field__content__element--inline.svelte-9faswx{display:flex;flex-wrap:wrap}}@media screen and (min-width: 769px){.mc-field__content__container--inline__item.svelte-9faswx:not(:last-child),.mc-field__content__element--inline__item.svelte-9faswx:not(:last-child){margin-bottom:0.25rem;margin-right:1rem}}.mc-field__item.svelte-9faswx{padding-top:0.375rem;padding-bottom:0.375rem}.mc-field__item.svelte-9faswx:not(:last-child){margin-bottom:0.25rem}.mc-field__validation-message.svelte-9faswx{font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem}.mc-field__validation-message.svelte-9faswx::before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid.svelte-9faswx{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid.svelte-9faswx::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid.svelte-9faswx{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid.svelte-9faswx::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field--group.svelte-9faswx{border:none;margin-left:0;margin-right:0;padding:0}.mc-textarea.svelte-9faswx{font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:1rem;line-height:1.5;min-height:4rem;padding:0.5rem 0.75rem}.mc-textarea.svelte-9faswx::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-textarea.svelte-9faswx:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d)}.mc-textarea.svelte-9faswx:focus{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-textarea.svelte-9faswx:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-textarea[readonly].svelte-9faswx{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-textarea.is-invalid.svelte-9faswx{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d)}.mc-textarea.is-invalid.svelte-9faswx:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112)}")}function E(e){let a,l,t,i,r=[{class:l="mc-textarea "+e[10]},{"aria-invalid":e[4]},{name:e[1]},{id:e[1]},{placeholder:e[2]},{rows:e[3]},{disabled:e[5]},{minlength:e[6]},{maxlength:e[7]},{readOnly:e[8]},{spellcheck:"false"},e[9]],w={};for(let e=0;e<r.length;e+=1)w=s(w,r[e]);return{c(){a=o("textarea"),n(a,w),d(a,"is-invalid",e[4]),d(a,"svelte-9faswx",!0)},m(l,r){c(l,a,r),a.autofocus&&a.focus(),m(a,e[0]),t||(i=[f(e[11].call(null,a)),v(a,"input",e[13]),v(a,"input",e[12])],t=!0)},p(e,[t]){n(a,w=_(r,[1024&t&&l!==(l="mc-textarea "+e[10])&&{class:l},16&t&&{"aria-invalid":e[4]},2&t&&{name:e[1]},2&t&&{id:e[1]},4&t&&{placeholder:e[2]},8&t&&{rows:e[3]},32&t&&{disabled:e[5]},64&t&&{minlength:e[6]},128&t&&{maxlength:e[7]},256&t&&{readOnly:e[8]},{spellcheck:"false"},512&t&&e[9]])),1&t&&m(a,e[0]),d(a,"is-invalid",e[4]),d(a,"svelte-9faswx",!0)},i:h,o:h,d(e){e&&g(a),t=!1,x(i)}}}function Z(e,a,l){let t,i;const r=["name","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly"];let o=w(a,r),{name:n}=a,{value:d}=a,{placeholder:c}=a,{rows:m=2}=a,{isinvalid:f}=a,{disabled:v=!1}=a,{minlength:h}=a,{maxlength:g}=a,{readonly:x}=a;const _=$(u());let k=new y(u(),p());return e.$$set=e=>{l(16,a=s(s({},a),b(e))),l(15,o=w(a,r)),"name"in e&&l(1,n=e.name),"value"in e&&l(0,d=e.value),"placeholder"in e&&l(2,c=e.placeholder),"rows"in e&&l(3,m=e.rows),"isinvalid"in e&&l(4,f=e.isinvalid),"disabled"in e&&l(5,v=e.disabled),"minlength"in e&&l(6,h=e.minlength),"maxlength"in e&&l(7,g=e.maxlength),"readonly"in e&&l(8,x=e.readonly)},e.$$.update=()=>{l(10,t=a.class),l(9,i=Object.assign({},o)),512&e.$$.dirty&&delete i.class},a=b(a),[d,n,c,m,f,v,h,g,x,i,t,_,function(e){let a=e.target.value;k.dispatch("on-input",a)},function(){d=this.value,l(0,d)}]}class C extends a{constructor(e){super(),l(this,e,Z,E,i,{name:1,value:0,placeholder:2,rows:3,isinvalid:4,disabled:5,minlength:6,maxlength:7,readonly:8},k)}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),t()}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),t()}get rows(){return this.$$.ctx[3]}set rows(e){this.$$set({rows:e}),t()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),t()}get disabled(){return this.$$.ctx[5]}set disabled(e){this.$$set({disabled:e}),t()}get minlength(){return this.$$.ctx[6]}set minlength(e){this.$$set({minlength:e}),t()}get maxlength(){return this.$$.ctx[7]}set maxlength(e){this.$$set({maxlength:e}),t()}get readonly(){return this.$$.ctx[8]}set readonly(e){this.$$set({readonly:e}),t()}}e(C,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{type:"Boolean"},minlength:{},maxlength:{},readonly:{}},[],[],!0);export{C as default};
+import{P as e,c as r,p as o,a,b as t,at as l,t as s,d as n,h as d,i,j as c,au as v,s as m}from"../../custom-element-D6iR2OWc.js";import{a as u}from"../../attributes-Dd-ZbJDt.js";import{c as f}from"../../input-D1i5U2EE.js";var h=s('<textarea spellcheck="false"></textarea>');const b={hash:"svelte-15vrvs3",code:"/**\n * Do not edit directly, this file was auto-generated.\n */\n/* stylelint-disable string-no-newline */\n\n/* stylelint-enable string-no-newline */.mc-textarea.svelte-15vrvs3 {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:1rem;line-height:1.5;min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-15vrvs3::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-15vrvs3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-15vrvs3:focus {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-textarea.svelte-15vrvs3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-15vrvs3 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-15vrvs3 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-15vrvs3:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}"};function g(e,r){o(r,!0),a(e,b);let s=t(r,"name",7),g=t(r,"value",15),x=t(r,"placeholder",7),p=t(r,"rows",7,2),w=t(r,"isinvalid",7),y=t(r,"disabled",7,!1),k=t(r,"minlength",7),j=t(r,"maxlength",7),_=t(r,"readonly",7);const z=l();var D=h();let E;return v(D),D.__input=function(e){let r=e.target.value;z("on-input",r)},n((()=>{E=m(D,1,"mc-textarea svelte-15vrvs3",null,E,{"is-invalid":w()}),u(D,"aria-invalid",w()),u(D,"name",s()),u(D,"id",s()),u(D,"placeholder",x()),u(D,"rows",p()),D.disabled=y(),u(D,"minlength",k()),u(D,"maxlength",j()),D.readOnly=_()})),f(D,g),d(e,D),i({get name(){return s()},set name(e){s(e),c()},get value(){return g()},set value(e){g(e),c()},get placeholder(){return x()},set placeholder(e){x(e),c()},get rows(){return p()},set rows(e=2){p(e),c()},get isinvalid(){return w()},set isinvalid(e){w(e),c()},get disabled(){return y()},set disabled(e=!1){y(e),c()},get minlength(){return k()},set minlength(e){k(e),c()},get maxlength(){return j()},set maxlength(e){j(e),c()},get readonly(){return _()},set readonly(e){_(e),c()}})}e(["input"]),customElements.define("m-textarea",r(g,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{}},[],[],!0));export{g as default};
 //# sourceMappingURL=Textarea.js.map

package/public/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { EventHandler } from '../../utilities/EventHandler';\n  export let name: string;\n  export let value: string;\n  export let placeholder: string;\n  export let rows = 2;\n  export let isinvalid: boolean;\n  export let disabled = false;\n  export let minlength: number;\n  export let maxlength: number;\n  export let readonly: boolean;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    eventHandler.dispatch('on-input', value);\n  }\n</script>\n\n<textarea\n  use:forwardEvents\n  bind:value\n  class=\"mc-textarea {userClass}\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  {...attributes}\n  on:input={onInput}\n/>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["ctx","insert","target","textarea","anchor","class","textarea_class_value","name","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","createEventDispatcher","$$invalidate","userClass","attributes","Object","assign","$$restProps","e","dispatch"],"mappings":"goKAoCsBA,EAAS,qBAEfA,EAAS,oBAEnBA,EAAI,0HAQJA,EAAU,oGAXIA,EAAS,oCAJ7BC,EAiBCC,EAAAC,EAAAC,gGADWJ,EAAO,+DAbGA,EAAS,MAAA,CAAAK,MAAAC,yBAEfN,EAAS,8BAEnBA,EAAI,qKAQJA,EAAU,sCAXIA,EAAS,mNA7BhBO,GAAYC,SACZC,GAAaD,eACbE,GAAmBF,GACnBG,KAAAA,EAAO,GAACH,aACRI,GAAkBJ,GAClBK,SAAAA,GAAW,GAAKL,aAChBM,GAAiBN,aACjBO,GAAiBP,YACjBQ,GAAiBR,QAEtBS,EAAgBC,EAAqBC,KACvC,IAAAC,EAAmB,IAAAC,EACrBF,IACAG,yXAECC,EAAA,GAAAC,EAAYhB,EAAQH,OACtBkB,EAAA,EAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,2BACXH,EAAWpB,uCAEZ,SAAQwB,GACX,IAAApB,EAASoB,EAAE3B,OAA4BO,MAC3CW,EAAaU,SAAS,WAAYrB"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n\n  const dispatch = createEventDispatcher();\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    dispatch('on-input', value);\n  }\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  oninput={onInput}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","dispatch","createEventDispatcher","e","target"],"mappings":"4hEAkBIA,EAAIC,EAAAC,EAAA,OAAA,GACJC,EAAKF,EAAAC,EAAA,QAAA,IACLE,EAAWH,EAAAC,EAAA,cAAA,GACXG,eAAO,GACPC,EAASL,EAAAC,EAAA,YAAA,GACTK,oBAAW,GACXC,EAASP,EAAAC,EAAA,YAAA,GACTO,EAASR,EAAAC,EAAA,YAAA,GACTQ,EAAQT,EAAAC,EAAA,WAAA,GAGJ,MAAAS,EAAWC,0CAER,SAAQC,GACX,IAAAV,EAASU,EAAEC,OAA4BX,MAC3CQ,EAAS,WAAYR,EACvB,oEAMkBG,yBACJA,8BAEVN,iUAtBK,+GAEI"}

package/public/components/textarea/Textarea.svelte

@@ -1,40 +1,43 @@
-<svelte:options customElement="" />
+<svelte:options customElement="m-textarea" />
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-  import { createEventForwarder } from '../../utilities/EventForward';
-  import { EventHandler } from '../../utilities/EventHandler';
-  export let name: string;
-  export let value: string;
-  export let placeholder: string;
-  export let rows = 2;
-  export let isinvalid: boolean;
-  export let disabled = false;
-  export let minlength: number;
-  export let maxlength: number;
-  export let readonly: boolean;
 
-  const forwardEvents = createEventForwarder(get_current_component());
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    rows?: number;
+    isinvalid: boolean;
+    disabled?: boolean;
+    minlength: number;
+    maxlength: number;
+    readonly: boolean;
+  }
+
+  let {
+    name,
+    value = $bindable(),
+    placeholder,
+    rows = 2,
+    isinvalid,
+    disabled = false,
+    minlength,
+    maxlength,
+    readonly,
+  }: Props = $props();
+
+  const dispatch = createEventDispatcher();
 
   function onInput(e: Event) {
     let value = (e.target as HTMLInputElement).value;
-    eventHandler.dispatch('on-input', value);
+    dispatch('on-input', value);
   }
 </script>
 
 <textarea
-  use:forwardEvents
   bind:value
-  class="mc-textarea {userClass}"
+  class="mc-textarea"
   class:is-invalid={isinvalid}
   aria-invalid={isinvalid}
   {name}
@@ -46,9 +49,8 @@
   {maxlength}
   {readonly}
   spellcheck="false"
-  {...attributes}
-  on:input={onInput}
-/>
+  oninput={onInput}
+></textarea>
 
 <style lang="scss">
   @use '@mozaic-ds/styles/components/field';

package/public/components/textinput/Textinput.js

@@ -1,2 +1,2 @@
-import{c as e,S as t,i as o,f as n,s as i,a as l,p as s,e as a,b as r,E as c,t as v,d,g as m,h as p,O as u,I as h,L as x,j as g,k as b,l as f,m as j,M as $,n as _,o as y,K as w,P as k,q as z,z as q,A as E,B as L,C as B,D as C,F as M,G as F,w as O}from"../../index-c0bfe08f.js";import{g as S}from"../../spread-ed04f539.js";import{c as Z}from"../../EventForward-bb916157.js";import{E as A}from"../../EventHandler-f7ee47ca.js";function D(e){l(e,"svelte-1ovon7j",".mc-controls-options.svelte-1ovon7j.svelte-1ovon7j{align-items:center;display:inline-flex;justify-content:center;gap:0.5rem}.mc-controls-options__button.svelte-1ovon7j.svelte-1ovon7j{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0}.mc-controls-options__icon.svelte-1ovon7j.svelte-1ovon7j{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button.svelte-1ovon7j.svelte-1ovon7j,.mc-controls-options__icon.svelte-1ovon7j.svelte-1ovon7j{height:1.5rem;width:1.5rem}.mc-controls-options__label.svelte-1ovon7j.svelte-1ovon7j{clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit.svelte-1ovon7j.svelte-1ovon7j{font-size:1rem;line-height:1.3;font-weight:600;color:var(--forms-color-text-default, #000000)}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j{transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:0.5rem}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j,.mc-text-input.svelte-1ovon7j .svelte-1ovon7j{box-sizing:border-box}.mc-text-input__control.svelte-1ovon7j.svelte-1ovon7j{background-color:transparent;border-width:0;font-family:inherit;outline:none;padding:0.75rem 0.6875rem;font-size:1rem;line-height:1.3;font-weight:400;flex-grow:1}.mc-text-input__control[type=number].svelte-1ovon7j.svelte-1ovon7j::-webkit-inner-spin-button,.mc-text-input__control[type=number].svelte-1ovon7j.svelte-1ovon7j::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number].svelte-1ovon7j.svelte-1ovon7j{appearance:textfield}.mc-text-input__control[type=search].svelte-1ovon7j.svelte-1ovon7j::-webkit-search-decoration,.mc-text-input__control[type=search].svelte-1ovon7j.svelte-1ovon7j::-webkit-search-cancel-button{appearance:none}.mc-text-input__control.svelte-1ovon7j.svelte-1ovon7j::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon.svelte-1ovon7j.svelte-1ovon7j{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j:focus-within{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-text-input.svelte-1ovon7j.svelte-1ovon7j:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d)}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j:has(.mc-text-input__icon){padding-inline-start:0.6875rem}.mc-text-input.svelte-1ovon7j:has(.mc-text-input__icon) .mc-text-input__control.svelte-1ovon7j{padding-inline-start:0}.mc-text-input.svelte-1ovon7j.svelte-1ovon7j:has(.mc-controls-options){padding-inline-end:0.6875rem}.mc-text-input.svelte-1ovon7j:has(.mc-controls-options) .mc-text-input__control.svelte-1ovon7j{padding-inline-end:0}.mc-text-input--s.svelte-1ovon7j.svelte-1ovon7j{height:2rem}.mc-text-input--s.svelte-1ovon7j .mc-text-input__control.svelte-1ovon7j{padding:0.375rem 0.6875rem;font-size:0.875rem;line-height:1.3}.mc-text-input--s.svelte-1ovon7j.svelte-1ovon7j:has(.mc-text-input__icon){padding-inline-start:0.4375rem}.mc-text-input--s.svelte-1ovon7j.svelte-1ovon7j:has(.mc-controls-options){padding-inline-end:0.4375rem}.mc-text-input.is-invalid.svelte-1ovon7j.svelte-1ovon7j{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid.svelte-1ovon7j.svelte-1ovon7j:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112)}.right-align.svelte-1ovon7j.svelte-1ovon7j{text-align:right}")}const G=e=>({}),H=e=>({});function I(e){let t,o;const n=e[28].icon,i=q(n,e,e[27],H);return{c(){t=a("span"),i&&i.c(),d(t,"class","mc-text-input__icon svelte-1ovon7j")},m(e,n){m(e,t,n),i&&i.m(t,null),o=!0},p(e,t){i&&i.p&&(!o||134217728&t[0])&&E(i,n,e,e[27],o?B(n,e[27],t,G):L(e[27]),H)},i(e){o||(g(i,e),o=!0)},o(e){b(i,e),o=!1},d(e){e&&j(t),i&&i.d(e)}}}function K(e){let t,o,n,i,l,s,c,v,u;return{c(){t=a("div"),o=a("button"),n=C("svg"),i=C("path"),l=r(),s=a("span"),c=M(e[13]),d(i,"fill-rule","evenodd"),d(i,"d","M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"),d(i,"class","svelte-1ovon7j"),d(n,"class","mc-controls-options__icon svelte-1ovon7j"),d(n,"aria-hidden","true"),d(s,"class","mc-controls-options__label svelte-1ovon7j"),d(o,"type","button"),d(o,"class","mc-controls-options__button svelte-1ovon7j"),d(t,"class","mc-controls-options js-control-options svelte-1ovon7j")},m(a,r){m(a,t,r),p(t,o),p(o,n),p(n,i),p(o,l),p(o,s),p(s,c),v||(u=x(o,"click",e[21]),v=!0)},p(e,t){8192&t[0]&&F(c,e[13])},d(e){e&&j(t),v=!1,u()}}}function P(e){let t,o,n,i,l,_,y,w,k=e[23].icon&&I(e),z=[{class:"mc-text-input__control"},{"aria-invalid":e[4]},{name:e[1]},{id:e[1]},{placeholder:e[2]},{disabled:e[5]},{min:e[8]},{max:e[9]},{minlength:e[10]},{maxlength:e[11]},{spellcheck:"false"},{required:e[12]},e[14]],q={};for(let e=0;e<z.length;e+=1)q=s(q,z[e]);let E=e[15]&&K(e);return{c(){t=a("div"),k&&k.c(),o=r(),n=a("input"),i=r(),E&&E.c(),c(n,q),v(n,"svelte-1ovon7j",!0),d(t,"class",l=e[18](e[3],e[4],e[6],e[7])+" "+e[22].class+" svelte-1ovon7j")},m(l,s){m(l,t,s),k&&k.m(t,null),p(t,o),p(t,n),n.autofocus&&n.focus(),u(n,e[0]),p(t,i),E&&E.m(t,null),_=!0,y||(w=[h(e[16].call(null,n)),x(n,"input",e[29]),h(e[19].call(null,n)),x(n,"input",e[20]),x(n,"keydown",e[30])],y=!0)},p(e,i){e[23].icon?k?(k.p(e,i),8388608&i[0]&&g(k,1)):(k=I(e),k.c(),g(k,1),k.m(t,o)):k&&(O(),b(k,1,1,(()=>{k=null})),f()),c(n,q=S(z,[{class:"mc-text-input__control"},(!_||16&i[0])&&{"aria-invalid":e[4]},(!_||2&i[0])&&{name:e[1]},(!_||2&i[0])&&{id:e[1]},(!_||4&i[0])&&{placeholder:e[2]},(!_||32&i[0])&&{disabled:e[5]},(!_||256&i[0])&&{min:e[8]},(!_||512&i[0])&&{max:e[9]},(!_||1024&i[0])&&{minlength:e[10]},(!_||2048&i[0])&&{maxlength:e[11]},{spellcheck:"false"},(!_||4096&i[0])&&{required:e[12]},16384&i[0]&&e[14]])),1&i[0]&&n.value!==e[0]&&u(n,e[0]),v(n,"svelte-1ovon7j",!0),e[15]?E?E.p(e,i):(E=K(e),E.c(),E.m(t,null)):E&&(E.d(1),E=null),(!_||4194520&i[0]&&l!==(l=e[18](e[3],e[4],e[6],e[7])+" "+e[22].class+" svelte-1ovon7j"))&&d(t,"class",l)},i(e){_||(g(k),_=!0)},o(e){b(k),_=!1},d(e){e&&j(t),k&&k.d(),E&&E.d(),y=!1,$(w)}}}function J(e,t,o){let n,i,l;const a=["name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable"];let r=_(t,a),{$$slots:c={},$$scope:v}=t;const d=y(c);let{name:m}=t,{value:p}=t,{placeholder:u}=t,{inputtype:h="text"}=t,{isvalid:x}=t,{isinvalid:g}=t,{disabled:b=!1}=t,{size:f="m"}=t,{iconname:j}=t,{rightalign:$}=t,{min:q}=t,{max:E}=t,{minlength:L}=t,{maxlength:B}=t,{required:C=!1}=t,{clearlabel:M="Clear content"}=t,{isclearable:F=!1}=t;const O=Z(w());let S=new A(w(),k());return e.$$set=e=>{o(22,t=s(s({},t),z(e))),o(32,r=_(t,a)),"name"in e&&o(1,m=e.name),"value"in e&&o(0,p=e.value),"placeholder"in e&&o(2,u=e.placeholder),"inputtype"in e&&o(24,h=e.inputtype),"isvalid"in e&&o(3,x=e.isvalid),"isinvalid"in e&&o(4,g=e.isinvalid),"disabled"in e&&o(5,b=e.disabled),"size"in e&&o(6,f=e.size),"iconname"in e&&o(7,j=e.iconname),"rightalign"in e&&o(25,$=e.rightalign),"min"in e&&o(8,q=e.min),"max"in e&&o(9,E=e.max),"minlength"in e&&o(10,L=e.minlength),"maxlength"in e&&o(11,B=e.maxlength),"required"in e&&o(12,C=e.required),"clearlabel"in e&&o(13,M=e.clearlabel),"isclearable"in e&&o(26,F=e.isclearable),"$$scope"in e&&o(27,v=e.$$scope)},e.$$.update=()=>{16777216&e.$$.dirty[0]&&(n=h),67108865&e.$$.dirty[0]&&o(15,i=!(!F||!p)),o(14,l=Object.assign({},r)),16384&e.$$.dirty[0]&&delete l.class},t=z(t),[p,m,u,x,g,b,f,j,q,E,L,B,C,M,l,i,O,S,function(e,t,o,n){const i=["mc-text-input","mc-field__input"];return e&&i.push("is-valid"),t&&i.push("is-invalid"),"s"===o&&i.push("mc-text-input--s"),n&&i.push("mc-left-icon-input__input"),$&&i.push("right-align"),i.join(" ")},e=>{e.type=n},function(e){let t=e.target.value;B&&"number"===h&&(e.target.value=t.slice(0,B))},function(){o(0,p="")},t,d,h,$,F,v,c,function(){p=this.value,o(0,p)},e=>{"Enter"===e?.key&&S.dispatch("submit-search",p)}]}class N extends t{constructor(e){super(),o(this,e,J,P,i,{name:1,value:0,placeholder:2,inputtype:24,isvalid:3,isinvalid:4,disabled:5,size:6,iconname:7,rightalign:25,min:8,max:9,minlength:10,maxlength:11,required:12,clearlabel:13,isclearable:26},D,[-1,-1])}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),n()}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),n()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),n()}get inputtype(){return this.$$.ctx[24]}set inputtype(e){this.$$set({inputtype:e}),n()}get isvalid(){return this.$$.ctx[3]}set isvalid(e){this.$$set({isvalid:e}),n()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),n()}get disabled(){return this.$$.ctx[5]}set disabled(e){this.$$set({disabled:e}),n()}get size(){return this.$$.ctx[6]}set size(e){this.$$set({size:e}),n()}get iconname(){return this.$$.ctx[7]}set iconname(e){this.$$set({iconname:e}),n()}get rightalign(){return this.$$.ctx[25]}set rightalign(e){this.$$set({rightalign:e}),n()}get min(){return this.$$.ctx[8]}set min(e){this.$$set({min:e}),n()}get max(){return this.$$.ctx[9]}set max(e){this.$$set({max:e}),n()}get minlength(){return this.$$.ctx[10]}set minlength(e){this.$$set({minlength:e}),n()}get maxlength(){return this.$$.ctx[11]}set maxlength(e){this.$$set({maxlength:e}),n()}get required(){return this.$$.ctx[12]}set required(e){this.$$set({required:e}),n()}get clearlabel(){return this.$$.ctx[13]}set clearlabel(e){this.$$set({clearlabel:e}),n()}get isclearable(){return this.$$.ctx[26]}set isclearable(e){this.$$set({isclearable:e}),n()}}e(N,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{type:"Boolean"},size:{},iconname:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{type:"Boolean"},clearlabel:{},isclearable:{type:"Boolean"}},["icon"],[],!0);export{N as default};
+import{a5 as e,U as o,P as t,c as n,p as r,a as i,k as s,t as l,l as a,g as c,d as v,s as p,h as d,i as m,N as u,X as h,r as f}from"../../custom-element-D6iR2OWc.js";import{i as b}from"../../if-CxjAhvpF.js";import{s as x,a as j}from"../../slot-snFjRYH3.js";import{s as g,r as _}from"../../attributes-Dd-ZbJDt.js";import{c as w}from"../../input-D1i5U2EE.js";var y=l('<span class="mc-text-input__icon svelte-1ovon7j"><!></span>'),k=l('<div class="mc-controls-options js-control-options svelte-1ovon7j"><button type="button" class="mc-controls-options__button svelte-1ovon7j"><svg class="mc-controls-options__icon svelte-1ovon7j" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-1ovon7j"></path></svg> <span class="mc-controls-options__label svelte-1ovon7j"></span></button></div>'),O=l("<div><!> <input> <!></div>");const $={hash:"svelte-1ovon7j",code:"/**\n * Do not edit directly, this file was auto-generated.\n */.mc-controls-options.svelte-1ovon7j {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1ovon7j {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;}.mc-controls-options__icon.svelte-1ovon7j {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1ovon7j, .mc-controls-options__icon.svelte-1ovon7j {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1ovon7j {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-1ovon7j {font-size:1rem;line-height:1.3;font-weight:600;color:var(--forms-color-text-default, #000000);}\n\n/* stylelint-disable string-no-newline */.mc-text-input.svelte-1ovon7j {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:0.5rem;}.mc-text-input.svelte-1ovon7j,\n.mc-text-input.svelte-1ovon7j :where(.svelte-1ovon7j) {box-sizing:border-box;}.mc-text-input__control.svelte-1ovon7j {background-color:transparent;border-width:0;font-family:inherit;outline:none;\n  /* For Blink & WebKit rendering engines */\n  /* For Gecko rendering engine */padding:0.75rem 0.6875rem;font-size:1rem;line-height:1.3;font-weight:400;flex-grow:1;}.mc-text-input__control[type=number].svelte-1ovon7j::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1ovon7j::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-1ovon7j {appearance:textfield;}.mc-text-input__control[type=search].svelte-1ovon7j::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1ovon7j::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1ovon7j::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-1ovon7j {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;}.mc-text-input.svelte-1ovon7j:focus-within {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-text-input.svelte-1ovon7j:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-1ovon7j:has(input:where(.svelte-1ovon7j):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-1ovon7j:has(input[readonly]:where(.svelte-1ovon7j)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1ovon7j:has(.mc-text-input__icon:where(.svelte-1ovon7j)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1ovon7j:has(.mc-text-input__icon:where(.svelte-1ovon7j)) .mc-text-input__control:where(.svelte-1ovon7j) {padding-inline-start:0;}.mc-text-input.svelte-1ovon7j:has(.mc-controls-options:where(.svelte-1ovon7j)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1ovon7j:has(.mc-controls-options:where(.svelte-1ovon7j)) .mc-text-input__control:where(.svelte-1ovon7j) {padding-inline-end:0;}.mc-text-input--s.svelte-1ovon7j {height:2rem;}.mc-text-input--s.svelte-1ovon7j .mc-text-input__control:where(.svelte-1ovon7j) {padding:0.375rem 0.6875rem;font-size:0.875rem;line-height:1.3;}.mc-text-input--s.svelte-1ovon7j:has(.mc-text-input__icon:where(.svelte-1ovon7j)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-1ovon7j:has(.mc-controls-options:where(.svelte-1ovon7j)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-1ovon7j {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-1ovon7j:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}\n\n/* stylelint-enable string-no-newline */.right-align.svelte-1ovon7j {text-align:right;}"};function z(t,n){const l=x(n);r(n,!0),i(t,$);var z=this&&this.__rest||function(e,o){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)o.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(t[n[r]]=e[n[r]])}return t};let L=s(n,["$$slots","$$events","$$legacy","$$host"]),{name:P,value:q,placeholder:C,inputtype:S="text",isvalid:E,isinvalid:F,disabled:M=!1,size:Z="m",iconname:B,rightalign:D,min:G,max:I,minlength:K,maxlength:N,required:U=!1,clearlabel:W="Clear content",isclearable:X=!1}=L,A=z(L,["name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable"]),H=h((()=>S)),J=h((()=>!(!X||!q)));function Q(){console.log(q),q=""}var R=O(),T=c(R),V=e=>{var o=y(),t=c(o);j(t,n,"icon",{}),f(o),d(e,o)};b(T,(e=>{l.icon&&e(V)}));var Y=a(T,2);let ee;_(Y),e((()=>w(Y,(()=>q),(e=>q=e)))),function(t,n,r){e((()=>{var e=o((()=>n(t,r?.())||{}));if(e?.destroy)return()=>e.destroy()}))}(Y,(e=>{e.type=u(H)}));var oe=a(Y,2),te=e=>{var o=k(),t=c(o);t.__click=Q,a(c(t),2).textContent=W,f(t),f(o),d(e,o)};b(oe,(e=>{u(J)&&e(te)})),f(R),v((e=>{p(R,1,`${e??""} `,"svelte-1ovon7j"),ee=g(Y,ee,{class:"mc-text-input__control","aria-invalid":F,name:P,id:P,placeholder:C,disabled:M,min:G,max:I,minlength:K,maxlength:N,spellcheck:"false",required:U,...A},"svelte-1ovon7j")}),[()=>function(e,o,t,n){const r=["mc-text-input","mc-field__input"];return e&&r.push("is-valid"),o&&r.push("is-invalid"),"s"===t&&r.push("mc-text-input--s"),n&&r.push("mc-left-icon-input__input"),D&&r.push("right-align"),r.join(" ")}(E,F,Z,B)]),d(t,R),m()}t(["click"]),customElements.define("m-textinput",n(z,{},["icon"],[],!0));export{z as default};
 //# sourceMappingURL=Textinput.js.map

package/public/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { EventHandler } from '../../utilities/EventHandler';\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  export let name: string;\n  export let value: string;\n  export let placeholder: string;\n  export let inputtype: TextInputType = 'text';\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let disabled = false;\n  export let size: TextInputSize = 'm';\n  export let iconname: string;\n  export let rightalign: boolean;\n  export let min: string;\n  export let max: string;\n  export let minlength: number;\n  export let maxlength: number;\n  export let required: boolean = false;\n  export let clearlabel = 'Clear content';\n  export let isclearable = false;\n  const forwardEvents = createEventForwarder(get_current_component());\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  $: inputType = inputtype;\n  $: displayClear = isclearable && value ? true : false;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    if (maxlength && inputtype === 'number') {\n      (e.target as HTMLInputElement).value = value.slice(0, maxlength);\n    }\n  }\n\n  function resetValue() {\n    value = '';\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}\">\n  {#if $$slots.icon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    use:forwardEvents\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...attributes}\n    on:input={onInput}\n    on:keydown={(event) => {\n      if (event?.key === 'Enter') {\n        eventHandler.dispatch('submit-search', value);\n      }\n    }}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        on:click={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["insert","target","span","anchor","ctx","div","append","button","svg","path","if_block0","icon","create_if_block_1","create_if_block","class","input","name","$$props","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","createEventDispatcher","inputType","$$invalidate","displayClear","attributes","Object","assign","$$restProps","isValid","isInvalid","classes","push","join","node","type","e","slice","event","key","dispatch"],"mappings":"qiKAwFIA,EAEMC,EAAAC,EAAAC,gSAyCwCC,EAAU,ooBAbxDJ,EAeKC,EAAAI,EAAAF,GAbHG,EAYQD,EAAAE,GAPND,EAKKC,EAAAC,GAJHF,EAGCE,EAAAC,UAEHH,EAA2DC,EAAAL,4BARjDE,EAAU,kCAQsBA,EAAU,gEA5CrDM,EAAAN,MAAQO,MAAIC,EAAAR,uDAUDA,EAAS,oBAEnBA,EAAI,uIASJA,EAAU,wDASXA,EAAY,KAAAS,EAAAT,kHA/BNA,EAAU,IAACA,EAAO,GAAEA,EAAS,GAAEA,EAAI,GAAEA,EAAQ,IAAA,IAAIA,EAAO,IAACU,MAAK,2BAA3Ed,EAiDKC,EAAAI,EAAAF,yBA3CHG,EAuBCD,EAAAU,iJANWX,EAAO,yCAtBdA,MAAQO,sLAUGP,EAAS,gDAEnBA,EAAI,mQASJA,EAAU,kEASXA,EAAY,uFA/BNA,EAAU,IAACA,EAAO,GAAEA,EAAS,GAAEA,EAAI,GAAEA,EAAQ,IAAA,IAAIA,EAAO,IAACU,MAAK,4YA3E9DE,GAAYC,SACZC,GAAaD,eACbE,GAAmBF,GACnBG,UAAAA,EAA2B,QAAMH,WACjCI,GAAgBJ,aAChBK,GAAkBL,GAClBM,SAAAA,GAAW,GAAKN,GAChBO,KAAAA,EAAsB,KAAGP,YACzBQ,GAAgBR,cAChBS,GAAmBT,OACnBU,GAAWV,OACXW,GAAWX,aACXY,GAAiBZ,aACjBa,GAAiBb,GACjBc,SAAAA,GAAoB,GAAKd,GACzBe,WAAAA,EAAa,iBAAef,GAC5BgB,YAAAA,GAAc,GAAKhB,QACxBiB,EAAgBC,EAAqBC,KACvC,IAAAC,EAAmB,IAAAC,EACrBF,IACAG,osBAECC,EAAYpB,2BACdqB,EAAA,GAAEC,KAAeT,IAAef,IAChCuB,EAAA,GAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,gCACXH,EAAW7B,mDAEZ,SACPiC,EACAC,EACAxB,EACAC,SAEMwB,EAAO,CAAI,gBAAiB,0BAE9BF,GACFE,EAAQC,KAAK,YAGXF,GACFC,EAAQC,KAAK,cAGF,MAAT1B,GACFyB,EAAQC,KAAK,oBAGXzB,GACFwB,EAAQC,KAAK,6BAGXxB,GACFuB,EAAQC,KAAK,eAGRD,EAAQE,KAAK,MAGLC,IAEfA,EAAKC,KAAOb,CAAS,EAGd,SAAQc,GACX,IAAApC,EAASoC,EAAErD,OAA4BiB,MACvCY,GAA2B,WAAdV,IACdkC,EAAErD,OAA4BiB,MAAQA,EAAMqC,MAAM,EAAGzB,gBAKxDW,EAAA,EAAAvB,EAAQ,mDA4BKsC,IACQ,UAAfA,GAAOC,KACTpB,EAAaqB,SAAS,gBAAiBxC"}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte","../../../node_modules/svelte/src/internal/client/dom/elements/actions.js"],"sourcesContent":["<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    size?: TextInputSize;\n    iconname: string;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    size = 'm',\n    iconname,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    ...events\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    console.log(value);\n    value = '';\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} \">\n  {#if $$slots.icon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...events}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n","/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n"],"names":["__rest","this","s","e","_a","$.rest_props","$$props","name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","events","inputType","displayClear","resetValue","console","log","$$slots","icon","$$render","consequent","dom","action","get_value","effect","payload","untrack","destroy","type","$.get","consequent_1","isValid","isInvalid","classes","push","join","getClasses"],"mappings":"2pLAEiB,IAAAA,EAAAC,MAAAA,KAAAD,QAAA,SAAAE,EAAAC,+TAuBX,IAAAC,EAAAC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,iBACFC,EAAIC,MACJA,EAAKC,YACLA,EAAWC,UACXA,EAAY,OAAMC,QAClBA,EAAOC,UACPA,EAASC,SACTA,GAAW,EAAKC,KAChBA,EAAO,IAAGC,SACVA,EAAQC,WACRA,EAAUC,IACVA,EAAGC,IACHA,EAAGC,UACHA,EAASC,UACTA,EAASC,SACTA,GAAW,EAAKC,WAChBA,EAAa,gBAAeC,YAC5BA,GAAc,GAAKnB,EAChBoB,EAAMxB,EAAAI,EAAA,CAlBP,OAAA,QAAA,cAAA,YAAA,UAAA,YAAA,WAAA,OAAA,WAAA,aAAA,MAAA,MAAA,YAAA,YAAA,WAAA,aAAA,gBAqBAqB,SAAqBf,IACrBgB,YAAwBH,IAAef,cAsClCmB,IACPC,QAAQC,IAAIrB,GACZA,EAAQ,EACV,gFAIKsB,EAAQC,MAAIC,EAAAC,EAAA,4DChFZ,SAAgBC,EAAKC,EAAQC,GACnCC,GAAO,KACN,IAAIC,EAAUC,GAAQ,IAAMJ,EAAOD,EAAKE,QAAkB,KAwB1D,GAAIE,GAASE,QACZ,MAAO,IAA+BF,EAAe,SACxD,GAEA,WDwCSG,KAAIC,EAAGjB,sDAuCCE,wBAQiCL,gCAd3CI,IAAYM,EAAAW,GAAA,6GAdD/B,YAEVL,gGASAiB,wBArBK,IA1CF,SACPoB,EACAC,EACA/B,EACAC,SAEM+B,EAAO,CAAI,gBAAiB,0BAE9BF,GACFE,EAAQC,KAAK,YAGXF,GACFC,EAAQC,KAAK,cAGF,MAATjC,GACFgC,EAAQC,KAAK,oBAGXhC,GACF+B,EAAQC,KAAK,6BAGX/B,GACF8B,EAAQC,KAAK,eAGRD,EAAQE,KAAK,IACtB,CAaWC,CAAWtC,EAASC,EAAWE,EAAMC","x_google_ignoreList":[1]}

package/public/components/textinput/Textinput.svelte

@@ -1,40 +1,51 @@
-<svelte:options customElement="" />
+<svelte:options customElement="m-textinput" />
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import { createEventForwarder } from '../../utilities/EventForward';
-  import { EventHandler } from '../../utilities/EventHandler';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
   import type { TextInputSize, TextInputType } from './textinput.types';
 
-  export let name: string;
-  export let value: string;
-  export let placeholder: string;
-  export let inputtype: TextInputType = 'text';
-  export let isvalid: boolean;
-  export let isinvalid: boolean;
-  export let disabled = false;
-  export let size: TextInputSize = 'm';
-  export let iconname: string;
-  export let rightalign: boolean;
-  export let min: string;
-  export let max: string;
-  export let minlength: number;
-  export let maxlength: number;
-  export let required: boolean = false;
-  export let clearlabel = 'Clear content';
-  export let isclearable = false;
-  const forwardEvents = createEventForwarder(get_current_component());
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  $: inputType = inputtype;
-  $: displayClear = isclearable && value ? true : false;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  interface Props {
+    name: string;
+    value: string;
+    placeholder: string;
+    inputtype?: TextInputType;
+    isvalid: boolean;
+    isinvalid: boolean;
+    disabled?: boolean;
+    size?: TextInputSize;
+    iconname: string;
+    rightalign: boolean;
+    min: string;
+    max: string;
+    minlength: number;
+    maxlength: number;
+    required?: boolean;
+    clearlabel?: string;
+    isclearable?: boolean;
+  }
+
+  let {
+    name,
+    value,
+    placeholder,
+    inputtype = 'text',
+    isvalid,
+    isinvalid,
+    disabled = false,
+    size = 'm',
+    iconname,
+    rightalign,
+    min,
+    max,
+    minlength,
+    maxlength,
+    required = false,
+    clearlabel = 'Clear content',
+    isclearable = false,
+    ...events
+  }: Props = $props();
+
+  let inputType = $derived(inputtype);
+  let displayClear = $derived(isclearable && value ? true : false);
 
   function getClasses(
     isValid: boolean,
@@ -72,26 +83,19 @@
     node.type = inputType;
   };
 
-  function onInput(e: Event) {
-    let value = (e.target as HTMLInputElement).value;
-    if (maxlength && inputtype === 'number') {
-      (e.target as HTMLInputElement).value = value.slice(0, maxlength);
-    }
-  }
-
   function resetValue() {
+    console.log(value);
     value = '';
   }
 </script>
 
-<div class="{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}">
+<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
   {#if $$slots.icon}
     <span class="mc-text-input__icon">
       <slot name="icon" />
     </span>
   {/if}
   <input
-    use:forwardEvents
     bind:value
     use:setType
     class="mc-text-input__control"
@@ -106,13 +110,7 @@
     {maxlength}
     spellcheck="false"
     {required}
-    {...attributes}
-    on:input={onInput}
-    on:keydown={(event) => {
-      if (event?.key === 'Enter') {
-        eventHandler.dispatch('submit-search', value);
-      }
-    }}
+    {...events}
   />
   <!-- Control options -->
   {#if displayClear}
@@ -121,7 +119,7 @@
       <button
         type="button"
         class="mc-controls-options__button"
-        on:click={resetValue}
+        onclick={resetValue}
       >
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path