@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/textinput/Textinput.js

@@ -1,13 +1,9 @@
-import{x as X,y as re,n as se,c as oe,p as le,a as ae,b as n,f as N,t as Q,m as x,z as W,e as ce,h as p,i as de,j as i,d as h,s as H,r as f,g as ve,A as R,B as U}from"../../custom-element.js";import{s as ue}from"../../snippet.js";import{i as J}from"../../if.js";import{s as me}from"../../slot.js";import{b as be,r as pe}from"../../attributes.js";import{c as he}from"../../input.js";function fe(v,t,s){X(()=>{var r=re(()=>t(v,s==null?void 0:s())||{});if(r!=null&&r.destroy)return()=>r.destroy()})}function ge(v,t,s){var r;t(""),(r=s())==null||r("onclear")}var _e=N('<span class="mc-text-input__icon svelte-nvbisr"><!></span>'),xe=N('<div class="mc-controls-options js-control-options svelte-nvbisr"><button type="button" class="mc-controls-options__button svelte-nvbisr"><svg class="mc-controls-options__icon svelte-nvbisr" 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-nvbisr"></path></svg> <span class="mc-controls-options__label svelte-nvbisr"> </span></button></div>'),we=N("<div><!> <input/> <!></div>");const ye={hash:"svelte-nvbisr",code:`/**
+import{v as G,c as O,p as T,a as V,b as n,f as j,d as l,s as z,t as C,i as E,j as q,k as o,r as s,h as A,e as B,g as H}from"../../custom-element.js";import{i as I}from"../../if.js";import{s as J}from"../../slot.js";import{r as K,s as c}from"../../attributes.js";import{c as N}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";const Q=(v,t)=>t("");var R=j('<div class="mc-controls-options svelte-5c9enb"><button type="button" class="mc-controls-options__button svelte-5c9enb"><svg class="mc-controls-options__icon svelte-5c9enb" 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-5c9enb"></path></svg> <span class="mc-controls-options__label svelte-5c9enb"> </span></button></div>'),U=j('<div><span class="mc-text-input__icon svelte-5c9enb"><!></span> <input class="mc-text-input__control svelte-5c9enb"/> <!></div>');const W={hash:"svelte-5c9enb",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-controls-options.svelte-nvbisr {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-nvbisr {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:100%;}.mc-controls-options__button.svelte-nvbisr:hover .mc-controls-options__icon:where(.svelte-nvbisr) {fill:#4d4d4d;}.mc-controls-options__button.svelte-nvbisr:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-controls-options__icon.svelte-nvbisr {fill:#666666;}.mc-controls-options__button.svelte-nvbisr, .mc-controls-options__icon.svelte-nvbisr {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-nvbisr {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-nvbisr {font-size:1rem;line-height:1.3;font-weight:600;color:#000000;}
+ */.mc-controls-options.svelte-5c9enb {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-5c9enb {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-5c9enb:hover .mc-controls-options__icon:where(.svelte-5c9enb) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-5c9enb:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-controls-options__icon.svelte-5c9enb {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-5c9enb, .mc-controls-options__icon.svelte-5c9enb {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-5c9enb {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-5c9enb {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
 
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-nvbisr {transition:box-shadow 200ms ease;background-color:#ffffff;border:1px solid #666666;border-radius:0.25rem;transition:all ease 200ms;color:#000000;display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-nvbisr {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-nvbisr {
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-nvbisr::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-nvbisr::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-nvbisr::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-nvbisr::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-nvbisr::placeholder {color:#666666;}.mc-text-input__icon.svelte-nvbisr {fill:#666666;height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-nvbisr:focus-within {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-text-input.svelte-nvbisr:hover:not(:focus-within) {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-text-input.svelte-nvbisr:has(input:where(.svelte-nvbisr):disabled) {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;pointer-events:none;}.mc-text-input.svelte-nvbisr:has(input[readonly]:where(.svelte-nvbisr)) {border-color:#cccccc;pointer-events:none;}.mc-text-input.svelte-nvbisr:has(.mc-text-input__icon:where(.svelte-nvbisr)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-nvbisr:has(.mc-text-input__icon:where(.svelte-nvbisr)) .mc-text-input__control:where(.svelte-nvbisr) {padding-inline-start:0;}.mc-text-input.svelte-nvbisr:has(.mc-controls-options:where(.svelte-nvbisr)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-nvbisr:has(.mc-controls-options:where(.svelte-nvbisr)) .mc-text-input__control:where(.svelte-nvbisr) {padding-inline-end:0;}.mc-text-input--s.svelte-nvbisr {height:2rem;}.mc-text-input--s.svelte-nvbisr .mc-text-input__control:where(.svelte-nvbisr) {padding:0.375rem 0.6875rem;font-size:0.875rem;line-height:1.3;}.mc-text-input--s.svelte-nvbisr:has(.mc-text-input__icon:where(.svelte-nvbisr)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-nvbisr:has(.mc-controls-options:where(.svelte-nvbisr)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-nvbisr {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-text-input.is-invalid.svelte-nvbisr:hover:not(:focus-within) {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-text-input.svelte-nvbisr :where(.svelte-nvbisr) {box-sizing:border-box;}
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
+  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-5c9enb {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-5c9enb {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-5c9enb: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-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-5c9enb:has(input:where(.svelte-5c9enb):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-5c9enb:has(input[readonly]:where(.svelte-5c9enb)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-start:0;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-end:0;}.mc-text-input--s.svelte-5c9enb {height:2rem;}.mc-text-input--s.svelte-5c9enb .mc-text-input__control:where(.svelte-5c9enb) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-5c9enb {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-5c9enb :where(.svelte-5c9enb) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.right-align.svelte-nvbisr {text-align:right;}`};function ke(v,t){le(t,!0),ae(v,ye);let s=n(t,"name",7),r=n(t,"value",7),w=n(t,"placeholder",7),y=n(t,"inputtype",7,"text"),k=n(t,"isvalid",7),g=n(t,"isinvalid",7),z=n(t,"disabled",7,!1),q=n(t,"readonly",7,!1),C=n(t,"size",7,"m"),j=n(t,"hasicon",7,!1),u=n(t,"icon",7),L=n(t,"rightalign",7),B=n(t,"min",7),D=n(t,"max",7),F=n(t,"minlength",7),M=n(t,"maxlength",7),S=n(t,"required",7,!1),Z=n(t,"clearlabel",7,"Clear content"),A=n(t,"isclearable",7,!1),E=n(t,"onclear",7),G=n(t,"oninput",7),I=n(t,"onchange",7),K=n(t,"onblur",7),Y=W(y),$=W(()=>!!(A()&&r())),O=W(()=>!!j()||!!u());function ee(e,l,a,c){const o=["mc-text-input","mc-field__input"];return e&&o.push("is-valid"),l&&o.push("is-invalid"),a==="s"&&o.push("mc-text-input--s"),c&&o.push("mc-left-icon-input__input"),L()&&o.push("right-align"),o.join(" ")}const T=e=>{e.type=x(Y)};var _=we(),P=h(_);{var te=e=>{var l=_e(),a=h(l);{var c=d=>{var b=R(),V=U(b);ue(V,u),p(d,b)},o=d=>{var b=R(),V=U(b);me(V,t,"icon",{}),p(d,b)};J(a,d=>{u()?d(c):d(o,!1)})}f(l),p(e,l)};J(P,e=>{x(O)&&e(te)})}var m=H(P,2);pe(m),be(m,()=>({class:"mc-text-input__control","aria-invalid":g(),name:s(),id:s(),placeholder:w(),disabled:z(),min:B(),max:D(),minlength:F(),maxlength:M(),spellcheck:"false",required:S(),...q()?{readonly:!0}:{},oninput:G(),onchange:I(),onblur:K()}),void 0,void 0,"svelte-nvbisr"),X(()=>he(m,r)),fe(m,e=>T==null?void 0:T(e));var ne=H(m,2);{var ie=e=>{var l=xe(),a=h(l);a.__click=[ge,r,E];var c=H(h(a),2),o=h(c,!0);f(c),f(a),f(l),Q(()=>ve(o,Z())),p(e,l)};J(ne,e=>{x($)&&e(ie)})}return f(_),Q(e=>ce(_,1,`${e??""} `,"svelte-nvbisr"),[()=>ee(k(),g(),C(),x(O))]),p(v,_),de({get name(){return s()},set name(e){s(e),i()},get value(){return r()},set value(e){r(e),i()},get placeholder(){return w()},set placeholder(e){w(e),i()},get inputtype(){return y()},set inputtype(e="text"){y(e),i()},get isvalid(){return k()},set isvalid(e){k(e),i()},get isinvalid(){return g()},set isinvalid(e){g(e),i()},get disabled(){return z()},set disabled(e=!1){z(e),i()},get readonly(){return q()},set readonly(e=!1){q(e),i()},get size(){return C()},set size(e="m"){C(e),i()},get hasicon(){return j()},set hasicon(e=!1){j(e),i()},get icon(){return u()},set icon(e){u(e),i()},get rightalign(){return L()},set rightalign(e){L(e),i()},get min(){return B()},set min(e){B(e),i()},get max(){return D()},set max(e){D(e),i()},get minlength(){return F()},set minlength(e){F(e),i()},get maxlength(){return M()},set maxlength(e){M(e),i()},get required(){return S()},set required(e=!1){S(e),i()},get clearlabel(){return Z()},set clearlabel(e="Clear content"){Z(e),i()},get isclearable(){return A()},set isclearable(e=!1){A(e),i()},get onclear(){return E()},set onclear(e){E(e),i()},get oninput(){return G()},set oninput(e){G(e),i()},get onchange(){return I()},set onchange(e){I(e),i()},get onblur(){return K()},set onblur(e){K(e),i()}})}se(["click"]);customElements.define("m-textinput",oe(ke,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{},readonly:{},size:{},hasicon:{},icon:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{},clearlabel:{},isclearable:{},onclear:{},oninput:{},onchange:{},onblur:{}},["icon"],[],!0));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function X(v,t){T(t,!0),V(v,W);let b=n(t,"id",7),m=n(t,"name",7),i=n(t,"value",7),u=n(t,"placeholder",7),p=n(t,"inputtype",7,"text"),a=n(t,"isinvalid",7),f=n(t,"disabled",7),h=n(t,"readonly",7),_=n(t,"size",7,"m"),x=n(t,"clearlabel",7,"Clear content"),g=n(t,"isclearable",7);var F={get id(){return b()},set id(e){b(e),o()},get name(){return m()},set name(e){m(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return u()},set placeholder(e){u(e),o()},get inputtype(){return p()},set inputtype(e="text"){p(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return f()},set disabled(e){f(e),o()},get readonly(){return h()},set readonly(e){h(e),o()},get size(){return _()},set size(e="m"){_(e),o()},get clearlabel(){return x()},set clearlabel(e="Clear content"){x(e),o()},get isclearable(){return g()},set isclearable(e){g(e),o()}},d=U(),w=l(d),M=l(w);J(M,t,"icon",{}),s(w);var r=z(w,2);K(r);var S=z(r,2);{var Z=e=>{var y=R(),k=l(y);k.__click=[Q,i];var L=z(l(k),2),D=l(L,!0);s(L),s(k),s(y),C(()=>A(D,x())),E(e,y)};I(S,e=>{g()&&i()&&e(Z)})}return s(d),C(()=>{B(d,1,H(["mc-text-input",`mc-text-input--${_()}`,a()&&"is-invalid"]),"svelte-5c9enb"),c(r,"aria-invalid",a()),c(r,"name",m()),c(r,"id",b()),c(r,"type",p()),c(r,"placeholder",u()),r.disabled=f(),r.readOnly=h()}),N(r,i),E(v,d),q(F)}G(["click"]);customElements.define("m-textinput",O(X,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,P));
 //# sourceMappingURL=Textinput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @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","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n  import type { Snippet } from 'svelte';\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    readonly?: boolean;\n    size?: TextInputSize;\n    hasicon?: boolean;\n    icon?: Snippet;\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    onclear?: (arg: string) => void;\n    oninput?: (event: Event) => void;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    readonly = false,\n    size = 'm',\n    hasicon = false,\n    icon,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    onclear,\n    oninput,\n    onchange,\n    onblur,\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n  let hasIcon = $derived(!!hasicon || !!icon)\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    hasIcon: boolean,\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 (hasIcon) {\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    value = '';\n    onclear?.('onclear');\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, hasIcon)} \">\n  {#if hasIcon}\n    <span class=\"mc-text-input__icon\">\n      {#if icon}\n       {@render icon()}\n      {:else}\n        <slot name=\"icon\" />\n      {/if}\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    {...readonly ? { readonly: true } : {}}\n    {oninput}\n    {onchange}\n    {onblur}\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"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","onclear","_a","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","readonly","size","hasicon","icon","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","oninput","onchange","onblur","inputType","displayClear","hasIcon","$.derived","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$render","consequent","alternate","consequent_1","consequent_2"],"mappings":"8XAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,GAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CCwDW,SAAAE,GAAaC,EAAAC,EAAAC,EAAA,OACpBD,EAAQ,EAAE,GACVE,EAAAD,EAAO,IAAP,MAAAC,EAAU,UACZ;;;;;;;;;;;yGArGF,uBAiCIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJL,EAAKI,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,EAAIV,EAAAC,EAAA,OAAA,CAAA,EACJU,EAAUX,EAAAC,EAAA,aAAA,CAAA,EACVW,EAAGZ,EAAAC,EAAA,MAAA,CAAA,EACHY,EAAGb,EAAAC,EAAA,MAAA,CAAA,EACHa,EAASd,EAAAC,EAAA,YAAA,CAAA,EACTc,EAASf,EAAAC,EAAA,YAAA,CAAA,EACTe,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EACnBrB,EAAOG,EAAAC,EAAA,UAAA,CAAA,EACPkB,EAAOnB,EAAAC,EAAA,UAAA,CAAA,EACPmB,EAAQpB,EAAAC,EAAA,WAAA,CAAA,EACRoB,EAAMrB,EAAAC,EAAA,SAAA,CAAA,EAGJqB,IAAqBnB,CAAS,EAC9BoB,QAAwB,GAAAL,EAAW,GAAItB,EAAQ,EAAY,EAC3D4B,EAAOC,EAAA,IAAA,CAAA,CAAchB,KAAO,CAAA,CAAMC,GAAI,WAEjCgB,GACPC,EACAC,EACApB,EACAgB,EACQ,OACFK,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBrB,IAAS,KACXqB,EAAQ,KAAK,kBAAkB,EAG7BL,GACFK,EAAQ,KAAK,2BAA2B,EAGtClB,EAAU,GACZkB,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGV,CAAS,CACtB,mFAYaZ,CAAI,mEADTA,EAAI,EAAAuB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAFRX,CAAO,GAAAS,EAAAG,EAAA,gFAaI/B,EAAS,cAEnBN,EAAI,8GASJQ,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,0KAYlBb,GAAUE,EAAAC,CAAA,sDAQuBoB,EAAU,CAAA,CAAA,qBAdrDM,CAAY,GAAAU,EAAAI,EAAA,0DA/BN,IAAAX,GAAWtB,IAASC,EAAW,EAAAG,MAAMgB,CAAO,CAAA,kNApEzC,OAAM,+JAGP,GAAK,qDACL,GAAK,6CACT,IAAG,mDACA,GAAK,+VAOJ,GAAK,yDACH,gBAAe,2DACd,GAAK,wNAmDvB","x_google_ignoreList":[0]}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}\n>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\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  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["resetValue","_","value","id","$.prop","$$props","name","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","$$render","consequent","customElementForwardEvents"],"mappings":"0WAwEQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;;kHAxEtC,oBA2DIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,oBAAY,MAAM,EAClBC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWV,EAAAC,EAAA,cAAA,CAAA,qPANC,OAAM,8MAIX,IAAG,yDACG,gBAAe,uLA+BfL,EAAUE,CAAA,qDAQuBW,EAAU,CAAA,CAAA,kBAbrDC,EAAW,GAAIZ,KAAKa,EAAAC,CAAA,gCAlBjB,kCAAmCJ,EAAI,CAAA,GAAIH,KAAa,mDAShDA,GAAS,2CAGjBD,GAAS,2EAfnB,oMAxE+CS"}

package/dist/components/textinput/Textinput.spec.js

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Textinput from './Textinput.svelte';
+describe('m-textinput component', () => {
+    const baseProps = {
+        id: 'textinput-id',
+        name: 'username',
+        value: 'JohnDoe',
+    };
+    it('renders input with correct attributes and value', () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const input = container.querySelector('input');
+        expect(input).toBeTruthy();
+        expect(input.id).toBe('textinput-id');
+        expect(input.name).toBe('username');
+        expect(input.value).toBe('JohnDoe');
+        expect(input.type).toBe('text');
+    });
+    it('updates value on user input', async () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'JaneDoe' } });
+        expect(input.value).toBe('JaneDoe');
+    });
+    it('renders placeholder if provided', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, placeholder: 'Enter your name' },
+        });
+        const input = container.querySelector('input');
+        expect(input.placeholder).toBe('Enter your name');
+    });
+    it('applies disabled and readonly props', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+    });
+    it('applies is-invalid class when isinvalid is true', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const wrapper = container.querySelector('.mc-text-input');
+        const input = container.querySelector('input');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+        expect(input.getAttribute('aria-invalid')).toBe('true');
+    });
+    it('applies correct input type and size class', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, inputtype: 'email', size: 's' },
+        });
+        const input = container.querySelector('input');
+        const wrapper = container.querySelector('.mc-text-input');
+        expect(input.type).toBe('email');
+        expect(wrapper.classList.contains('mc-text-input--s')).toBe(true);
+    });
+    it('shows and works clear button when isclearable is true and value exists', async () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: true, clearlabel: 'Clear input' },
+        });
+        const button = container.querySelector('button');
+        const input = container.querySelector('input');
+        expect(button).toBeTruthy();
+        expect(button.textContent).toContain('Clear input');
+        await fireEvent.click(button);
+        expect(input.value).toBe('');
+    });
+    it('does not show clear button when isclearable is false', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: false },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeFalsy();
+    });
+    it('does not show clear button when value is empty', () => {
+        const { container } = render(Textinput, {
+            props: { ...baseProps, isclearable: true, value: '' },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeFalsy();
+    });
+    it('hides icon slot container if slot is empty', () => {
+        const { container } = render(Textinput, { props: baseProps });
+        const iconContainer = container.querySelector('.mc-text-input__icon');
+        expect(iconContainer.innerHTML.trim()).toBe('<!---->');
+        expect(getComputedStyle(iconContainer).display).toBe('none');
+    });
+});

package/dist/components/textinput/Textinput.stories.d.ts

@@ -1,13 +1,12 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
- *
- * The `MTextInput` component is the **Svelte / WebComponent** implementation of the **Text Input** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Invalid: any;
-export declare const Disabled: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const minValue: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Textinput.stories.d.ts.map

package/dist/components/textinput/Textinput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2EE,IAAI;AA1ET,wBA0EU;AAyBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAmDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/textinput/Textinput.stories.js

@@ -1,154 +1,95 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
- *
- * The `MTextInput` component is the **Svelte / WebComponent** implementation of the **Text Input** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/text-input/).
- */
-export default {
+const meta = {
     title: 'Form Elements/TextInput',
-    tags: ['autodocs', 'beta'],
+    component: 'm-textinput',
     argTypes: {
-        name: {
-            description: 'Specify the text input name',
-            control: 'text',
-        },
-        value: {
-            description: 'Specify the text input value',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Specify the text input placeholder',
-            control: 'text',
-        },
         inputtype: {
-            description: 'Specify the text input type',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text'],
         },
-        isinvalid: {
-            description: 'Specify whether the text input is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Specify whether the text input is required',
-            control: 'boolean',
-        },
-        readonly: {
-            description: 'Specify whether the text input is readonly',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Specify whether the text input is disabled',
-            control: 'boolean',
-        },
-        isclearable: {
-            description: 'Specify whether the text input is clearable',
-            control: 'boolean',
-        },
-        rightalign: {
-            description: 'Specify whether the text input has the text is align on the right',
-            control: 'boolean',
-        },
-        min: {
-            description: 'Specify the min value for the imput',
-            control: 'boolean',
-        },
-        max: {
-            description: 'Specify the max value for the imput',
-            control: 'boolean',
-        },
-        minLength: {
-            description: 'Minimum number of characters required for the input (used with text type).',
-            control: 'boolean',
-        },
-        maxLength: {
-            description: 'Maximum number of characters allowed in the input (used with text type).',
-            control: 'boolean',
-        },
-        clearlabel: {
-            description: 'The label text for the clear button',
-            control: 'text',
-        },
         size: {
-            description: 'Specify the text input size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
     },
+    args: {
+        id: 'textInputId',
+        placeholder: 'Placeholder',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-textinput
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        inputtype=${ifDefined(args.inputtype)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        readonly=${ifDefined(args.readonly)}
+        isclearable=${ifDefined(args.isclearable)}
+        clearlabel=${ifDefined(args.clearlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-textinput>
+    `;
+    },
 };
-// Function to emulate pausing between interactions
-function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-const Template = (args) => {
-    const MTextInput = document.createElement('m-textinput');
-    MTextInput.setAttribute('inputtype', args.inputtype || 'text');
-    if (args.name)
-        MTextInput.setAttribute('name', args.name);
-    if (args.value)
-        MTextInput.setAttribute('value', args.value);
-    if (args.placeholder)
-        MTextInput.setAttribute('placeholder', args.placeholder);
-    if (args.isinvalid)
-        MTextInput.setAttribute('isinvalid', 'true');
-    if (args.require)
-        MTextInput.setAttribute('require', 'true');
-    if (args.disabled)
-        MTextInput.setAttribute('disabled', 'true');
-    if (args.readonly)
-        MTextInput.setAttribute('readonly', 'true');
-    if (args.isclearable)
-        MTextInput.setAttribute('isclearable', 'true');
-    if (args.size)
-        MTextInput.setAttribute('size', args.size);
-    MTextInput.addEventListener('input', action('input'));
-    MTextInput.onkeyup = action('onkeyup');
-    return MTextInput;
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Value of the input component',
+        isclearable: true,
+    },
 };
-export const Default = Template.bind({});
-Default.args = { placeholder: 'This is a default text input' };
-Default.play = async ({ canvasElement, step }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    const input = textinput?.shadowRoot.querySelector('input');
-    await sleep(1500);
-    await step('Focus input', async () => {
-        await userEvent.click(input);
-        await sleep(1500);
-        expect(input).not.toBeNull();
-        await sleep(1500);
-        await expect(input).toBeVisible();
-        await sleep(1500);
-    });
-    await step('Fill out input', async () => {
-        await userEvent.type(input, 'Testing input');
-        await sleep(1500);
-        expect(input).toHaveValue('Testing input');
-        await sleep(1500);
-    });
-    await step('Clear input', async () => {
-        await userEvent.keyboard('{Backspace>15}');
-        await sleep(1500);
-        expect(input).toHaveValue('');
-        await sleep(1500);
-    });
+export const Default = {};
+export const Small = {
+    args: {
+        id: 'smallId',
+        size: 's',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
-    placeholder: 'This is an invalid text input',
+export const minValue = {
+    args: {
+        id: 'minValueId',
+        inputtype: 'number',
+        value: '4',
+        min: '3',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    expect(textinput).toHaveAttribute('isinvalid', 'true');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'This is a disabled text input',
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const textinput = canvasElement.querySelector('m-textinput');
-    expect(textinput).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };