@mozaic-ds/web-components 0.1.0

package/public/components/tag/Tag.nested.svelte

@@ -0,0 +1,106 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { TagSize, TagType } from './tag.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+
+  export let label: string;
+  export let size: TagSize = 'm';
+  export let dark: boolean;
+  export let type: TagType = 'text';
+  export let disabled: boolean;
+  export let id: string;
+  export let href: string;
+  export let name: string;
+  export let selected = false;
+
+  $: isSelected = selected ? true : false;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  let eventHandler = new EventHandler();
+
+  function getClasses(type: TagType) {
+    const classes = [`mc-tag-${type}`];
+
+    if (size) {
+      classes.push(`mc-tag-${type}--${size}`);
+    }
+
+    if (dark) {
+      classes.push(`mc-tag-${type}--dark`);
+    }
+
+    return classes.join(' ');
+  }
+
+  function getSubClasses(type: TagType, element: string) {
+    return `mc-tag-${type}__${element}`;
+  }
+
+  function onSelect(): void {
+    isSelected = !isSelected;
+    eventHandler.dispatch('tag-selected', isSelected);
+  }
+
+  function onRemoved(): void {
+    eventHandler.dispatch('tag-removed', { id, label });
+  }
+</script>
+
+{#if type === 'text'}
+  <span class="{getClasses(type)}  {userClass}" {...attributes}>
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+  </span>
+{/if}
+{#if type === 'link'}
+  <a
+    {href}
+    class="{getClasses(type)}  {userClass}"
+    on:click={onSelect}
+    {...attributes}
+  >
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+  </a>
+{/if}
+{#if type === 'selectable'}
+  <span
+    class="{getClasses(type)}  {userClass}"
+    on:click={onSelect}
+    {...attributes}
+  >
+    <input
+      class={getSubClasses(type, 'input')}
+      type="checkbox"
+      {name}
+      checked={isSelected}
+      {id}
+      {disabled}
+    />
+    <label class={getSubClasses(type, 'pill')} for={id}>
+      <span class={getSubClasses(type, 'label')}>
+        {label}
+      </span>
+    </label>
+  </span>
+{/if}
+{#if type === 'removable'}
+  <span class="{getClasses(type)}  {userClass}" {...attributes}>
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+    <button class={getSubClasses(type, 'remove')} on:click={onRemoved}>
+      <span class={getSubClasses(type, 'remove-text')}> {label} </span>
+    </button>
+  </span>
+{/if}
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.tag';
+</style>

package/public/components/tag/Tag.svelte

@@ -0,0 +1,110 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import type { TagSize, TagType } from './tag.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import { createEventForwarder } from '../../utilities/EventForward';
+
+  export let label: string;
+  export let size: TagSize = 'm';
+  export let dark: boolean;
+  export let type: TagType = 'text';
+  export let disabled: boolean;
+  export let id: string;
+  export let href: string;
+  export let name: string;
+  export let selected = false;
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: isSelected = selected ? true : false;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  let eventHandler = new EventHandler();
+
+  function getClasses(type: TagType) {
+    const classes = [`mc-tag-${type}`];
+
+    if (size) {
+      classes.push(`mc-tag-${type}--${size}`);
+    }
+
+    if (dark) {
+      classes.push(`mc-tag-${type}--dark`);
+    }
+
+    return classes.join(' ');
+  }
+
+  function getSubClasses(type: TagType, element: string) {
+    return `mc-tag-${type}__${element}`;
+  }
+
+  function onSelect(): void {
+    isSelected = !isSelected;
+    eventHandler.dispatch('tag-selected', isSelected);
+  }
+
+  function onRemoved(): void {
+    eventHandler.dispatch('tag-removed', { id, label });
+  }
+</script>
+
+{#if type === 'text'}
+  <span class="{getClasses(type)}  {userClass}" {...attributes}>
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+  </span>
+{/if}
+{#if type === 'link'}
+  <a
+    {href}
+    class="{getClasses(type)}  {userClass}"
+    on:click={onSelect}
+    {...attributes}
+  >
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+  </a>
+{/if}
+{#if type === 'selectable'}
+  <span
+    class="{getClasses(type)}  {userClass}"
+    on:click={onSelect}
+    {...attributes}
+  >
+    <input
+      use:forwardEvents
+      class={getSubClasses(type, 'input')}
+      type="checkbox"
+      {name}
+      checked={isSelected}
+      {id}
+      {disabled}
+    />
+    <label class={getSubClasses(type, 'pill')} for={id}>
+      <span class={getSubClasses(type, 'label')}>
+        {label}
+      </span>
+    </label>
+  </span>
+{/if}
+{#if type === 'removable'}
+  <span class="{getClasses(type)}  {userClass}" {...attributes}>
+    <span class={getSubClasses(type, 'label')}>
+      {label}
+    </span>
+    <button class={getSubClasses(type, 'remove')} on:click={onRemoved}>
+      <span class={getSubClasses(type, 'remove-text')}> {label} </span>
+    </button>
+  </span>
+{/if}
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.tag';
+</style>

package/public/components/tag/tag.types.d.ts

@@ -0,0 +1,3 @@
+export type TagSize = 's' | 'm';
+export type TagType = 'text' | 'link' | 'selectable' | 'removable';
+//# sourceMappingURL=tag.types.d.ts.map

package/public/components/tag/tag.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;AAChC,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,CAAC"}

package/public/components/textarea/Textarea.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a,b as i,f as n,s,c as r,e as l,n as o,h as d,U as c,B as m,l as h,m as p,o as b,H as g,p as u,r as x,q as f}from"../../index-c33b3772.js";import{c as $}from"../../EventForward-3dbb2f25.js";function v(e){let t,a,n,s,u=[{class:a=w(e[4],e[5])+" "+e[10]},{"aria-invalid":e[5]},{name:e[1]},{id:e[1]},{placeholder:e[2]},{rows:e[3]},{disabled:e[6]},{minlength:e[7]},{maxlength:e[8]},{spellcheck:"false"},e[9]],x={};for(let e=0;e<u.length;e+=1)x=r(x,u[e]);return{c(){t=l("textarea"),this.c=o,d(t,x)},m(a,r){i(a,t,r),t.autofocus&&t.focus(),c(t,e[0]),n||(s=[m(e[11].call(null,t)),h(t,"input",e[12])],n=!0)},p(e,[i]){d(t,x=p(u,[1072&i&&a!==(a=w(e[4],e[5])+" "+e[10])&&{class:a},32&i&&{"aria-invalid":e[5]},2&i&&{name:e[1]},2&i&&{id:e[1]},4&i&&{placeholder:e[2]},8&i&&{rows:e[3]},64&i&&{disabled:e[6]},128&i&&{minlength:e[7]},256&i&&{maxlength:e[8]},{spellcheck:"false"},512&i&&e[9]])),1&i&&c(t,e[0])},i:o,o:o,d(e){e&&b(t),n=!1,g(s)}}}function w(e,t){const a=["mc-textarea"];return e&&a.push("is-valid"),t&&a.push("is-invalid"),a.join(" ")}function _(e,t,a){let i,n;const s=["name","value","placeholder","rows","isvalid","isinvalid","disabled","minlength","maxlength"];let l=u(t,s),{name:o}=t,{value:d}=t,{placeholder:c}=t,{rows:m=3}=t,{isvalid:h}=t,{isinvalid:p}=t,{disabled:b=!1}=t,{minlength:g}=t,{maxlength:v}=t;const w=$(x());return e.$$set=e=>{a(14,t=r(r({},t),f(e))),a(13,l=u(t,s)),"name"in e&&a(1,o=e.name),"value"in e&&a(0,d=e.value),"placeholder"in e&&a(2,c=e.placeholder),"rows"in e&&a(3,m=e.rows),"isvalid"in e&&a(4,h=e.isvalid),"isinvalid"in e&&a(5,p=e.isinvalid),"disabled"in e&&a(6,b=e.disabled),"minlength"in e&&a(7,g=e.minlength),"maxlength"in e&&a(8,v=e.maxlength)},e.$$.update=()=>{a(10,i=t.class),a(9,n=Object.assign({},l)),512&e.$$.dirty&&delete n.class},t=f(t),[d,o,c,m,h,p,b,g,v,n,i,w,function(){d=this.value,a(0,d)}]}class k extends e{constructor(e){super();const r=document.createElement("style");r.textContent='@charset "UTF-8";.mc-textarea{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.375;border-radius:4px;display:block;width:100%;position:relative;color:#191919;border:1px solid #666666;background:#ffffff;-webkit-transition:all ease 200ms;-o-transition:all ease 200ms;transition:all ease 200ms;padding:calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px)}.mc-textarea[type=number]::-webkit-inner-spin-button,.mc-textarea[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-textarea[type=number]{-moz-appearance:textfield}.mc-textarea[type=search]::-webkit-search-decoration:hover,.mc-textarea[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-textarea.is-hover,.mc-textarea:hover{border-color:#191919}.mc-textarea.is-valid{border-color:#46a610}.mc-textarea.is-invalid{border-color:#c61112}.mc-textarea.is-focus,.mc-textarea:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-textarea:disabled{border-color:#e6e6e6;background:#e6e6e6;cursor:not-allowed}.mc-textarea::-webkit-input-placeholder{color:#666666}.mc-textarea::-moz-placeholder{color:#666666}.mc-textarea:-ms-input-placeholder{color:#666666}.mc-textarea::-ms-input-placeholder{color:#666666}.mc-textarea::placeholder{color:#666666}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){}@media screen and (min-width: 1024px){}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}',this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:a(this.attributes),customElement:!0},_,v,s,{name:1,value:0,placeholder:2,rows:3,isvalid:4,isinvalid:5,disabled:6,minlength:7,maxlength:8},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),n()))}static get observedAttributes(){return["name","value","placeholder","rows","isvalid","isinvalid","disabled","minlength","maxlength"]}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 rows(){return this.$$.ctx[3]}set rows(e){this.$$set({rows:e}),n()}get isvalid(){return this.$$.ctx[4]}set isvalid(e){this.$$set({isvalid:e}),n()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(e){this.$$set({isinvalid:e}),n()}get disabled(){return this.$$.ctx[6]}set disabled(e){this.$$set({disabled:e}),n()}get minlength(){return this.$$.ctx[7]}set minlength(e){this.$$set({minlength:e}),n()}get maxlength(){return this.$$.ctx[8]}set maxlength(e){this.$$set({maxlength:e}),n()}}export{k as default};
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let name: string;\n  export let value: string;\n  export let placeholder: string;\n  export let rows = 3;\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let disabled = false;\n  export let minlength: number;\n  export let maxlength: number;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function getClasses(isValid: boolean, isInvalid: boolean): string {\n    const classes = ['mc-textarea'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<textarea\n  use:forwardEvents\n  bind:value\n  class=\"{getClasses(isvalid, isinvalid)} {userClass}\"\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  spellcheck=\"false\"\n  {...attributes}\n/>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.textarea';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["class","textarea_class_value","getClasses","ctx","insert","target","textarea","anchor","dirty","isValid","isInvalid","classes","push","join","name","$$props","value","placeholder","rows","isvalid","isinvalid","disabled","minlength","maxlength","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"iPAsCUA,MAAAC,EAAAC,EAAWC,EAAS,GAAAA,UAAaA,EAAS,qBACpCA,EAAS,oBAEnBA,EAAI,0GAOJA,EAAU,oGAbhBC,EAcCC,EAAAC,EAAAC,gHAXS,KAAAC,GAAAP,KAAAA,EAAAC,EAAWC,EAAS,GAAAA,UAAaA,EAAS,MAAA,CAAAH,MAAAC,yBACpCE,EAAS,8BAEnBA,EAAI,+IAOJA,EAAU,gEA5BLD,EAAWO,EAAkBC,GAC9B,MAAAC,GAAW,sBAEbF,GACFE,EAAQC,KAAK,YAGXF,GACFC,EAAQC,KAAK,cAGRD,EAAQE,KAAK,yJA1BXC,GAAYC,SACZC,GAAaD,eACbE,GAAmBF,GACnBG,KAAAA,EAAO,GAACH,WACRI,GAAgBJ,aAChBK,GAAkBL,GAClBM,SAAAA,GAAW,GAAKN,aAChBO,GAAiBP,aACjBQ,GAAiBR,QAEtBS,EAAgBC,EAAqBC,uXACxCC,EAAA,GAAAC,EAAYb,EAAQf,WACpB6B,EAALC,OAAAC,UAAuBC,2BACXH,EAAW7B"}

package/public/components/textarea/Textarea.svelte

@@ -0,0 +1,56 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let name: string;
+  export let value: string;
+  export let placeholder: string;
+  export let rows = 3;
+  export let isvalid: boolean;
+  export let isinvalid: boolean;
+  export let disabled = false;
+  export let minlength: number;
+  export let maxlength: number;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function getClasses(isValid: boolean, isInvalid: boolean): string {
+    const classes = ['mc-textarea'];
+
+    if (isValid) {
+      classes.push('is-valid');
+    }
+
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<textarea
+  use:forwardEvents
+  bind:value
+  class="{getClasses(isvalid, isinvalid)} {userClass}"
+  aria-invalid={isinvalid}
+  {name}
+  id={name}
+  {placeholder}
+  {rows}
+  {disabled}
+  {minlength}
+  {maxlength}
+  spellcheck="false"
+  {...attributes}
+/>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.textarea';
+  @import '@mozaic-ds/styles/components/c.fields';
+</style>

package/public/components/textinput/Textinput.js

@@ -0,0 +1,2 @@
+import{S as e,i as t,a as i,b as n,f as m,s as l,c as r,e as o,d as s,n as a,g as h,h as c,j as p,U as d,B as u,l as g,m as x,o as f,H as z,p as b,r as w,a4 as $,q as v}from"../../index-c33b3772.js";import{c as M}from"../../EventForward-3dbb2f25.js";function I(e){let t,i=`<${y(e[7])} />`;return{c(){t=o("span"),h(t,"class","mc-left-icon-input__icon")},m(e,m){n(e,t,m),t.innerHTML=i},p(e,n){128&n&&i!==(i=`<${y(e[7])} />`)&&(t.innerHTML=i)},d(e){e&&f(t)}}}function _(e){let t,i,m,l,b,w,$,v=e[7]&&I(e),M=[{class:b=(e[7]?"mc-left-icon-input":"")+" "+e[13]},e[12]],_={};for(let e=0;e<M.length;e+=1)_=r(_,M[e]);return{c(){t=o("div"),v&&v.c(),i=s(),m=o("input"),this.c=a,h(m,"class",l=e[15](e[3],e[4],e[6],e[7])+" "+e[17].class),h(m,"aria-invalid",e[4]),h(m,"name",e[1]),h(m,"id",e[1]),h(m,"placeholder",e[2]),m.disabled=e[5],h(m,"min",e[8]),h(m,"max",e[9]),h(m,"minlength",e[10]),h(m,"maxlength",e[11]),h(m,"spellcheck","false"),c(t,_)},m(l,r){n(l,t,r),v&&v.m(t,null),p(t,i),p(t,m),d(m,e[0]),w||($=[u(e[14].call(null,m)),g(m,"input",e[20]),u(e[16].call(null,m))],w=!0)},p(e,[n]){e[7]?v?v.p(e,n):(v=I(e),v.c(),v.m(t,i)):v&&(v.d(1),v=null),131288&n&&l!==(l=e[15](e[3],e[4],e[6],e[7])+" "+e[17].class)&&h(m,"class",l),16&n&&h(m,"aria-invalid",e[4]),2&n&&h(m,"name",e[1]),2&n&&h(m,"id",e[1]),4&n&&h(m,"placeholder",e[2]),32&n&&(m.disabled=e[5]),256&n&&h(m,"min",e[8]),512&n&&h(m,"max",e[9]),1024&n&&h(m,"minlength",e[10]),2048&n&&h(m,"maxlength",e[11]),1&n&&m.value!==e[0]&&d(m,e[0]),c(t,_=x(M,[8320&n&&b!==(b=(e[7]?"mc-left-icon-input":"")+" "+e[13])&&{class:b},4096&n&&e[12]]))},i:a,o:a,d(e){e&&f(t),v&&v.d(),w=!1,z($)}}}function y(e){return`${e}`}function A(e,t,i){let n,m,l;const o=["name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength"];let s=b(t,o),{name:a}=t,{value:h}=t,{placeholder:c}=t,{inputtype:p="text"}=t,{isvalid:d}=t,{isinvalid:u}=t,{disabled:g=!1}=t,{size:x="m"}=t,{iconname:f}=t,{rightalign:z}=t,{min:I}=t,{max:_}=t,{minlength:y}=t,{maxlength:A}=t;const k=M(w());const D=w();return $((()=>{D.shadowRoot.querySelector(".mc-text-input").type=n})),e.$$set=e=>{i(17,t=r(r({},t),v(e))),i(23,s=b(t,o)),"name"in e&&i(1,a=e.name),"value"in e&&i(0,h=e.value),"placeholder"in e&&i(2,c=e.placeholder),"inputtype"in e&&i(18,p=e.inputtype),"isvalid"in e&&i(3,d=e.isvalid),"isinvalid"in e&&i(4,u=e.isinvalid),"disabled"in e&&i(5,g=e.disabled),"size"in e&&i(6,x=e.size),"iconname"in e&&i(7,f=e.iconname),"rightalign"in e&&i(19,z=e.rightalign),"min"in e&&i(8,I=e.min),"max"in e&&i(9,_=e.max),"minlength"in e&&i(10,y=e.minlength),"maxlength"in e&&i(11,A=e.maxlength)},e.$$.update=()=>{262144&e.$$.dirty&&(n=p),i(13,m=t.class),i(12,l=Object.assign({},s)),4096&e.$$.dirty&&delete l.class},t=v(t),[h,a,c,d,u,g,x,f,I,_,y,A,l,m,k,function(e,t,i,n){const m=["mc-text-input","mc-field__input"];return e&&m.push("is-valid"),t&&m.push("is-invalid"),"s"===i&&m.push("mc-text-input--s"),n&&m.push("mc-left-icon-input__input"),z&&m.push("right-align"),m.join(" ")},e=>{e.type=n},t,p,z,function(){h=this.value,i(0,h)}]}class k extends e{constructor(e){super();const r=document.createElement("style");r.textContent='@charset "UTF-8";.mc-text-input{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#ffffff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::-webkit-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-moz-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input:-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input::placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right 0.4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input.is-hover,.mc-text-input:hover{border-color:#191919}.mc-text-input.is-focus,.mc-text-input:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-text-input--s{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-m::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-m::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-l::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-l::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xxl::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xxl::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);fill:#666666;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:0.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:0.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}.right-align{text-align:right}',this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},A,_,l,{name:1,value:0,placeholder:2,inputtype:18,isvalid:3,isinvalid:4,disabled:5,size:6,iconname:7,rightalign:19,min:8,max:9,minlength:10,maxlength:11},null),e&&(e.target&&n(e.target,this,e.anchor),e.props&&(this.$set(e.props),m()))}static get observedAttributes(){return["name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength"]}get name(){return this.$$.ctx[1]}set name(e){this.$$set({name:e}),m()}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),m()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),m()}get inputtype(){return this.$$.ctx[18]}set inputtype(e){this.$$set({inputtype:e}),m()}get isvalid(){return this.$$.ctx[3]}set isvalid(e){this.$$set({isvalid:e}),m()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),m()}get disabled(){return this.$$.ctx[5]}set disabled(e){this.$$set({disabled:e}),m()}get size(){return this.$$.ctx[6]}set size(e){this.$$set({size:e}),m()}get iconname(){return this.$$.ctx[7]}set iconname(e){this.$$set({iconname:e}),m()}get rightalign(){return this.$$.ctx[19]}set rightalign(e){this.$$set({rightalign:e}),m()}get min(){return this.$$.ctx[8]}set min(e){this.$$set({min:e}),m()}get max(){return this.$$.ctx[9]}set max(e){this.$$set({max:e}),m()}get minlength(){return this.$$.ctx[10]}set minlength(e){this.$$set({minlength:e}),m()}get maxlength(){return this.$$.ctx[11]}set maxlength(e){this.$$set({maxlength:e}),m()}}export{k as default};
+//# sourceMappingURL=Textinput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { afterUpdate } from 'svelte';\n  import { createEventForwarder } from '../../utilities/EventForward';\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  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: inputType = inputtype;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function generateIconName(iconName: string): string {\n    return `${iconName}`;\n  }\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  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const component: any = get_current_component();\n\n  afterUpdate(() => {\n    /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */\n    const input = component.shadowRoot.querySelector('.mc-text-input');\n    input.type = inputType;\n    /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */\n  });\n</script>\n\n<div class=\"{iconname ? 'mc-left-icon-input' : ''} {userClass}\" {...attributes}>\n  {#if iconname}\n    <span class=\"mc-left-icon-input__icon\">\n      {@html `<${generateIconName(iconname)} />`}\n    </span>\n  {/if}\n  <input\n    use:forwardEvents\n    bind:value\n    use:setType\n    class=\"{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}\"\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  />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.text-input';\n  @import '@mozaic-ds/styles/components/c.left-icon-input';\n  @import '@mozaic-ds/styles/components/c.fields';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["raw_value","generateIconName","ctx","insert","target","span","anchor","dirty","innerHTML","create_if_block","class","div_class_value","div","append","input","iconName","name","$$props","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","forwardEvents","createEventForwarder","get_current_component","component","afterUpdate","shadowRoot","querySelector","type","inputType","$$invalidate","userClass","attributes","Object","assign","$$restProps","isValid","isInvalid","classes","push","join","node"],"mappings":"8QAmFiBA,EAAA,IAAAC,EAAiBC,EAAQ,gFADtCC,EAEMC,EAAAC,EAAAC,yBADO,IAAAC,GAAAP,KAAAA,EAAA,IAAAC,EAAiBC,EAAQ,YAAAG,EAAAG,UAAAR,qDAFnCE,EAAQ,IAAAO,EAAAP,OADFQ,MAAAC,GAAAT,EAAW,GAAA,qBAAuB,QAAKA,EAAS,KAAOA,EAAU,2HAUlEA,EAAU,IAACA,EAAO,GAAEA,EAAS,GAAEA,EAAI,GAAEA,EAAQ,IAAA,IAAIA,EAAO,IAACQ,0BACnDR,EAAS,8BAEnBA,EAAI,mKAbZC,EAsBKC,EAAAQ,EAAAN,yBAhBHO,EAeCD,EAAAE,oGApBIZ,EAAQ,0EASHA,EAAU,IAACA,EAAO,GAAEA,EAAS,GAAEA,EAAI,GAAEA,EAAQ,IAAA,IAAIA,EAAO,IAACQ,gDACnDR,EAAS,wCAEnBA,EAAI,+MAbC,KAAAK,GAAAI,KAAAA,GAAAT,EAAW,GAAA,qBAAuB,QAAKA,EAAS,MAAA,CAAAQ,MAAAC,WAAOT,EAAU,kDAnDnE,SAAAD,EAAiBc,YACdA,0MArBDC,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,QACtBc,EAAgBC,EAAqBC,KAyCrC,MAMAC,EAAiBD,WAEvBE,GAAW,KAEKD,EAAUE,WAAWC,cAAc,kBAC3CC,KAAOC,CAAS,miBAlDrBA,EAAYnB,GACZoB,EAAA,GAAAC,EAAYxB,EAAQP,YACpBgC,EAALC,OAAAC,UAAuBC,4BACXH,EAAWhC,6CAKZ,SACPoC,EACAC,EACAvB,EACAC,SAEMuB,EAAO,CAAI,gBAAiB,0BAE9BF,GACFE,EAAQC,KAAK,YAGXF,GACFC,EAAQC,KAAK,cAGF,MAATzB,GACFwB,EAAQC,KAAK,oBAGXxB,GACFuB,EAAQC,KAAK,6BAGXvB,GACFsB,EAAQC,KAAK,eAGRD,EAAQE,KAAK,MAGLC,IAEfA,EAAKb,KAAOC,CAAS"}

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

@@ -0,0 +1,2 @@
+import{P as e,i as t,s as i,Q as m,c as l,e as n,d as s,g as r,h as o,z as c,b as a,j as b,U as p,l as h,B as v,m as d,n as j,o as q,H as u,p as f,q as x,O as g}from"../../index-c33b3772.js";function z(e){m(e,"svelte-qmbj86",'@charset "UTF-8";.mc-text-input.svelte-qmbj86.svelte-qmbj86{font-family:"LeroyMerlin", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;display:block;width:100%;position:relative;border:1px solid #666666;color:#191919;background-color:#ffffff;border-radius:4px}.mc-text-input[type=number].svelte-qmbj86.svelte-qmbj86::-webkit-inner-spin-button,.mc-text-input[type=number].svelte-qmbj86.svelte-qmbj86::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-text-input[type=number].svelte-qmbj86.svelte-qmbj86{-moz-appearance:textfield}.mc-text-input[type=search].svelte-qmbj86.svelte-qmbj86::-webkit-search-decoration:hover,.mc-text-input[type=search].svelte-qmbj86.svelte-qmbj86::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.svelte-qmbj86.svelte-qmbj86::placeholder{margin:0;color:#666666;opacity:1}.mc-text-input.is-valid.svelte-qmbj86.svelte-qmbj86,.mc-text-input.is-invalid.svelte-qmbj86.svelte-qmbj86{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right 0.4375rem center;padding-right:2.5rem}.mc-text-input.is-valid.svelte-qmbj86.svelte-qmbj86{border-color:#46a610;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+")}.mc-text-input.is-valid.svelte-qmbj86.svelte-qmbj86:hover,.mc-text-input.is-valid.is-hover.svelte-qmbj86.svelte-qmbj86{border-color:#035010}.mc-text-input.is-invalid.svelte-qmbj86.svelte-qmbj86{border-color:#c61112;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==")}.mc-text-input.is-invalid.svelte-qmbj86.svelte-qmbj86:hover,.mc-text-input.is-invalid.is-hover.svelte-qmbj86.svelte-qmbj86{border-color:#530000}.mc-text-input.is-hover.svelte-qmbj86.svelte-qmbj86,.mc-text-input.svelte-qmbj86.svelte-qmbj86:hover{border-color:#191919}.mc-text-input.is-focus.svelte-qmbj86.svelte-qmbj86,.mc-text-input.svelte-qmbj86.svelte-qmbj86:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-text-input.svelte-qmbj86.svelte-qmbj86:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-m.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-m.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-l.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-l.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xl.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xl.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;min-height:2rem;padding:0.375rem 0.4375rem}.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--s\\@from-xxl.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:0.875rem;line-height:1.2857142857}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86{font-size:1rem;line-height:1.375;min-height:3rem;padding:0.75rem 0.6875rem}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-webkit-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-moz-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86:-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86::-ms-input-placeholder{font-size:1rem;line-height:1.375}.mc-text-input--m\\@from-xxl.svelte-qmbj86.svelte-qmbj86::placeholder{font-size:1rem;line-height:1.375}}.mc-left-icon-input.svelte-qmbj86.svelte-qmbj86{position:relative}.mc-left-icon-input__icon.svelte-qmbj86.svelte-qmbj86{position:absolute;z-index:1;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);fill:#666666;pointer-events:none}.mc-left-icon-input.svelte-qmbj86 .mc-left-icon-input__icon.svelte-qmbj86{left:0.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input.svelte-qmbj86 .mc-left-icon-input__input.svelte-qmbj86{padding-left:2.9375rem}.mc-left-icon-input--s.svelte-qmbj86 .mc-left-icon-input__icon.svelte-qmbj86{left:0.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s.svelte-qmbj86 .mc-left-icon-input__input.svelte-qmbj86{padding-left:2.4375rem}.mc-field__label.svelte-qmbj86.svelte-qmbj86,.mc-field__legend.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend.svelte-qmbj86.svelte-qmbj86{padding-left:0;padding-right:0}.mc-field__requirement.svelte-qmbj86.svelte-qmbj86,.mc-field__help.svelte-qmbj86.svelte-qmbj86{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement.svelte-qmbj86.svelte-qmbj86::before{content:" - "}.mc-field__help.svelte-qmbj86.svelte-qmbj86{display:block;margin-top:0.125rem}.mc-field.svelte-qmbj86 .mc-field__input.svelte-qmbj86,.mc-field.svelte-qmbj86 .mc-field__element.svelte-qmbj86{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline.svelte-qmbj86.svelte-qmbj86{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline.svelte-qmbj86 .mc-field__item.svelte-qmbj86:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline.svelte-qmbj86 .mc-field__item.svelte-qmbj86:not(:last-child){margin-right:2rem}}.mc-field__item.svelte-qmbj86.svelte-qmbj86:not(:last-child){margin-bottom:1rem}.mc-field__error-message.svelte-qmbj86.svelte-qmbj86{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group.svelte-qmbj86.svelte-qmbj86{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group.svelte-qmbj86 .mc-field__error-message.svelte-qmbj86{margin-top:0.5rem}.right-align.svelte-qmbj86.svelte-qmbj86{text-align:right}')}function w(e){let t,i=`<${I(e[7])} />`;return{c(){t=n("span"),r(t,"class","mc-left-icon-input__icon svelte-qmbj86")},m(e,m){a(e,t,m),t.innerHTML=i},p(e,m){128&m&&i!==(i=`<${I(e[7])} />`)&&(t.innerHTML=i)},d(e){e&&q(t)}}}function M(e){let t,i,m,f,x,g,z,M=e[7]&&w(e),I=[{class:x=(e[7]?"mc-left-icon-input":"")+" "+e[11]},e[10]],_={};for(let e=0;e<I.length;e+=1)_=l(_,I[e]);return{c(){t=n("div"),M&&M.c(),i=s(),m=n("input"),r(m,"class",f=e[12](e[3],e[4],e[6],e[7])+" "+e[14].classinput+" svelte-qmbj86"),r(m,"aria-invalid",e[4]),r(m,"name",e[1]),r(m,"id",e[1]),r(m,"placeholder",e[2]),m.disabled=e[5],r(m,"min",e[8]),r(m,"max",e[9]),r(m,"spellcheck","false"),o(t,_),c(t,"svelte-qmbj86",!0)},m(l,n){a(l,t,n),M&&M.m(t,null),b(t,i),b(t,m),p(m,e[0]),g||(z=[h(m,"input",e[21]),v(e[13].call(null,m)),h(m,"input",e[17]),h(m,"click",e[18]),h(m,"change",e[19]),h(m,"blur",e[20])],g=!0)},p(e,[l]){e[7]?M?M.p(e,l):(M=w(e),M.c(),M.m(t,i)):M&&(M.d(1),M=null),16600&l&&f!==(f=e[12](e[3],e[4],e[6],e[7])+" "+e[14].classinput+" svelte-qmbj86")&&r(m,"class",f),16&l&&r(m,"aria-invalid",e[4]),2&l&&r(m,"name",e[1]),2&l&&r(m,"id",e[1]),4&l&&r(m,"placeholder",e[2]),32&l&&(m.disabled=e[5]),256&l&&r(m,"min",e[8]),512&l&&r(m,"max",e[9]),1&l&&m.value!==e[0]&&p(m,e[0]),o(t,_=d(I,[2176&l&&x!==(x=(e[7]?"mc-left-icon-input":"")+" "+e[11])&&{class:x},1024&l&&e[10]])),c(t,"svelte-qmbj86",!0)},i:j,o:j,d(e){e&&q(t),M&&M.d(),g=!1,u(z)}}}function I(e){return`${e}`}function _(e,t,i){let m,n;const s=["name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max"];let r=f(t,s),{name:o}=t,{value:c}=t,{placeholder:a}=t,{inputtype:b="text"}=t,{isvalid:p}=t,{isinvalid:h}=t,{disabled:v=!1}=t,{size:d="m"}=t,{iconname:j}=t,{rightalign:q}=t,{min:u}=t,{max:z}=t;return e.$$set=e=>{i(14,t=l(l({},t),x(e))),i(22,r=f(t,s)),"name"in e&&i(1,o=e.name),"value"in e&&i(0,c=e.value),"placeholder"in e&&i(2,a=e.placeholder),"inputtype"in e&&i(15,b=e.inputtype),"isvalid"in e&&i(3,p=e.isvalid),"isinvalid"in e&&i(4,h=e.isinvalid),"disabled"in e&&i(5,v=e.disabled),"size"in e&&i(6,d=e.size),"iconname"in e&&i(7,j=e.iconname),"rightalign"in e&&i(16,q=e.rightalign),"min"in e&&i(8,u=e.min),"max"in e&&i(9,z=e.max)},e.$$.update=()=>{i(11,m=t.class),i(10,n=Object.assign({},r)),1024&e.$$.dirty&&delete n.class},t=x(t),[c,o,a,p,h,v,d,j,u,z,n,m,function(e,t,i,m){const l=["mc-text-input","mc-field__input"];return e&&l.push("is-valid"),t&&l.push("is-invalid"),"s"===i&&l.push("mc-text-input--s"),m&&l.push("mc-left-icon-input__input"),q&&l.push("right-align"),l.join(" ")},e=>{e.type=b},t,b,q,function(t){g.call(this,e,t)},function(t){g.call(this,e,t)},function(t){g.call(this,e,t)},function(t){g.call(this,e,t)},function(){c=this.value,i(0,c)}]}class A extends e{constructor(e){super(),t(this,e,_,M,i,{name:1,value:0,placeholder:2,inputtype:15,isvalid:3,isinvalid:4,disabled:5,size:6,iconname:7,rightalign:16,min:8,max:9},z)}}export{A as default};
+//# sourceMappingURL=Textinput.nested.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.nested.js","sources":["../../../src/components/textinput/Textinput.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\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\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function generateIconName(iconName: string): string {\n    return `${iconName}`;\n  }\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</script>\n\n<div class=\"{iconname ? 'mc-left-icon-input' : ''} {userClass}\" {...attributes}>\n  {#if iconname}\n    <span class=\"mc-left-icon-input__icon\">\n      {@html `<${generateIconName(iconname)} />`}\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"{getClasses(\n      isvalid,\n      isinvalid,\n      size,\n      iconname,\n    )} {$$props.classinput}\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    spellcheck=\"false\"\n    on:input\n    on:click\n    on:change\n    on:blur\n  />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.text-input';\n  @import '@mozaic-ds/styles/components/c.left-icon-input';\n  @import '@mozaic-ds/styles/components/c.fields';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["raw_value","generateIconName","ctx","insert","target","span","anchor","dirty","innerHTML","create_if_block","class","div_class_value","classinput","div","append","input","iconName","name","$$props","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","$$invalidate","userClass","attributes","Object","assign","$$restProps","isValid","isInvalid","classes","push","join","node","type"],"mappings":"0pbAkEiBA,EAAA,IAAAC,EAAiBC,EAAQ,8FADtCC,EAEMC,EAAAC,EAAAC,yBADO,IAAAC,GAAAP,KAAAA,EAAA,IAAAC,EAAiBC,EAAQ,YAAAG,EAAAG,UAAAR,qDAFnCE,EAAQ,IAAAO,EAAAP,OADFQ,MAAAC,GAAAT,EAAW,GAAA,qBAAuB,QAAKA,EAAS,KAAOA,EAAU,kHASlEA,EAAU,IAChBA,EAAO,GACPA,EAAS,GACTA,EAAI,GACJA,EAAQ,IAAA,IACNA,EAAO,IAACU,WAAU,qCACRV,EAAS,8BAEnBA,EAAI,6IAjBZC,EA4BKC,EAAAS,EAAAP,yBAtBHQ,EAqBCD,EAAAE,0JA1BIb,EAAQ,yEAQHA,EAAU,IAChBA,EAAO,GACPA,EAAS,GACTA,EAAI,GACJA,EAAQ,IAAA,IACNA,EAAO,IAACU,WAAU,2DACRV,EAAS,wCAEnBA,EAAI,iJAjBC,KAAAK,GAAAI,KAAAA,GAAAT,EAAW,GAAA,qBAAuB,QAAKA,EAAS,MAAA,CAAAQ,MAAAC,WAAOT,EAAU,0EAzCnE,SAAAD,EAAiBe,YACdA,gLAlBDC,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,0cAEnBY,EAAA,GAAAC,EAAYb,EAAQR,YACpBsB,EAALC,OAAAC,UAAuBC,4BACXH,EAAWtB,uCAMZ,SACP0B,EACAC,EACAZ,EACAC,SAEMY,EAAO,CAAI,gBAAiB,0BAE9BF,GACFE,EAAQC,KAAK,YAGXF,GACFC,EAAQC,KAAK,cAGF,MAATd,GACFa,EAAQC,KAAK,oBAGXb,GACFY,EAAQC,KAAK,6BAGXZ,GACFW,EAAQC,KAAK,eAGRD,EAAQE,KAAK,MAGLC,IAEfA,EAAKC,KAAOrB,CAAS"}

package/public/components/textinput/Textinput.nested.svelte

@@ -0,0 +1,103 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  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;
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function generateIconName(iconName: string): string {
+    return `${iconName}`;
+  }
+
+  function getClasses(
+    isValid: boolean,
+    isInvalid: boolean,
+    size: TextInputSize,
+    iconname: string,
+  ): string {
+    const classes = ['mc-text-input', 'mc-field__input'];
+
+    if (isValid) {
+      classes.push('is-valid');
+    }
+
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+
+    if (size === 's') {
+      classes.push('mc-text-input--s');
+    }
+
+    if (iconname) {
+      classes.push('mc-left-icon-input__input');
+    }
+
+    if (rightalign) {
+      classes.push('right-align');
+    }
+
+    return classes.join(' ');
+  }
+
+  const setType = (node: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    node.type = inputtype;
+  };
+</script>
+
+<div class="{iconname ? 'mc-left-icon-input' : ''} {userClass}" {...attributes}>
+  {#if iconname}
+    <span class="mc-left-icon-input__icon">
+      {@html `<${generateIconName(iconname)} />`}
+    </span>
+  {/if}
+  <input
+    bind:value
+    use:setType
+    class="{getClasses(
+      isvalid,
+      isinvalid,
+      size,
+      iconname,
+    )} {$$props.classinput}"
+    aria-invalid={isinvalid}
+    {name}
+    id={name}
+    {placeholder}
+    {disabled}
+    {min}
+    {max}
+    spellcheck="false"
+    on:input
+    on:click
+    on:change
+    on:blur
+  />
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.text-input';
+  @import '@mozaic-ds/styles/components/c.left-icon-input';
+  @import '@mozaic-ds/styles/components/c.fields';
+
+  .right-align {
+    text-align: right;
+  }
+</style>

package/public/components/textinput/Textinput.svelte

@@ -0,0 +1,114 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { afterUpdate } from 'svelte';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  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;
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: inputType = inputtype;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+  function generateIconName(iconName: string): string {
+    return `${iconName}`;
+  }
+
+  function getClasses(
+    isValid: boolean,
+    isInvalid: boolean,
+    size: TextInputSize,
+    iconname: string,
+  ): string {
+    const classes = ['mc-text-input', 'mc-field__input'];
+
+    if (isValid) {
+      classes.push('is-valid');
+    }
+
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+
+    if (size === 's') {
+      classes.push('mc-text-input--s');
+    }
+
+    if (iconname) {
+      classes.push('mc-left-icon-input__input');
+    }
+
+    if (rightalign) {
+      classes.push('right-align');
+    }
+
+    return classes.join(' ');
+  }
+
+  const setType = (node: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    node.type = inputType;
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const component: any = get_current_component();
+
+  afterUpdate(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
+    const input = component.shadowRoot.querySelector('.mc-text-input');
+    input.type = inputType;
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
+  });
+</script>
+
+<div class="{iconname ? 'mc-left-icon-input' : ''} {userClass}" {...attributes}>
+  {#if iconname}
+    <span class="mc-left-icon-input__icon">
+      {@html `<${generateIconName(iconname)} />`}
+    </span>
+  {/if}
+  <input
+    use:forwardEvents
+    bind:value
+    use:setType
+    class="{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}"
+    aria-invalid={isinvalid}
+    {name}
+    id={name}
+    {placeholder}
+    {disabled}
+    {min}
+    {max}
+    {minlength}
+    {maxlength}
+    spellcheck="false"
+  />
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.text-input';
+  @import '@mozaic-ds/styles/components/c.left-icon-input';
+  @import '@mozaic-ds/styles/components/c.fields';
+
+  .right-align {
+    text-align: right;
+  }
+</style>

package/public/components/textinput/textinput.types.d.ts

@@ -0,0 +1,3 @@
+export type TextInputType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
+export type TextInputSize = 's' | 'm' | 'l';
+//# sourceMappingURL=textinput.types.d.ts.map

package/public/components/textinput/textinput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/textinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC"}