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

package/dist/components/passwordinput/PasswordInput.js

@@ -1,13 +1,8 @@
-import{n as E,c as G,p as I,a as K,b as n,f as D,D as W,m as a,v as q,d as c,s as S,t as B,h as C,i as A,j as s,w as J,r as d,g as j,e as N}from"../../custom-element.js";import{i as O}from"../../if.js";import{b as Q,r as R}from"../../attributes.js";import{c as T}from"../../input.js";import{B as U}from"../button/Button.js";import"../../slot.js";import"../loader/Loader.js";function X(f,t,i){t(""),i()()}var Y=D('<div class="mc-controls-options svelte-134wnsv"><button class="mc-controls-options__button svelte-134wnsv" type="button"><svg class="mc-controls-options__icon svelte-134wnsv" 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-134wnsv"></path></svg> <span class="mc-controls-options__label svelte-134wnsv"> </span></button></div>'),$=D('<span class="svelte-134wnsv"> </span>'),ee=D("<div><input/> <!> <!></div>");const te={hash:"svelte-134wnsv",code:`/**
+import{v as q,c as A,p as B,a as G,b as r,f as D,s as L,d as n,e as E,g as H,w as J,t as M,i as V,j as K,x as N,m as p,k as l,r as s,h as Z}from"../../custom-element.js";import{i as Q}from"../../if.js";import{r as R,s as c}from"../../attributes.js";import{c as T}from"../../input.js";import{c as U}from"../../custom-element-forward-events.js";function W(d,e){N(e,!p(e))}const X=(d,e)=>e("");var Y=D('<div class="mc-controls-options svelte-1luc9tv"><button class="mc-controls-options__button svelte-1luc9tv" type="button"><svg class="mc-controls-options__icon svelte-1luc9tv" 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-1luc9tv"></path></svg> <span class="mc-controls-options__label svelte-1luc9tv"> </span></button></div>'),$=D('<div><input class="mc-password-input__control mc-text-input__control svelte-1luc9tv"/> <!> <button type="button" role="switch" tabindex="0"><span class="svelte-1luc9tv"> </span></button></div>');const tt={hash:"svelte-1luc9tv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-password-input.svelte-134wnsv .mc-button:where(.svelte-134wnsv) {min-width:4rem;margin:0.5rem;}
+ */.mc-password-input.svelte-1luc9tv .mc-button:where(.svelte-1luc9tv) {min-width:4rem;margin:0.5rem;}
 
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-134wnsv {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-134wnsv {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-134wnsv {
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-134wnsv::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-134wnsv::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-134wnsv::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-134wnsv::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-134wnsv::placeholder {color:#666666;}.mc-text-input__icon.svelte-134wnsv {fill:#666666;height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-134wnsv: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-134wnsv:hover:not(:focus-within) {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-text-input.svelte-134wnsv:has(input:where(.svelte-134wnsv):disabled) {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;pointer-events:none;}.mc-text-input.svelte-134wnsv:has(input[readonly]:where(.svelte-134wnsv)) {border-color:#cccccc;pointer-events:none;}.mc-text-input.svelte-134wnsv:has(.mc-text-input__icon:where(.svelte-134wnsv)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-134wnsv:has(.mc-text-input__icon:where(.svelte-134wnsv)) .mc-text-input__control:where(.svelte-134wnsv) {padding-inline-start:0;}.mc-text-input.svelte-134wnsv:has(.mc-controls-options:where(.svelte-134wnsv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-134wnsv:has(.mc-controls-options:where(.svelte-134wnsv)) .mc-text-input__control:where(.svelte-134wnsv) {padding-inline-end:0;}.mc-text-input--s.svelte-134wnsv {height:2rem;}.mc-text-input.is-invalid.svelte-134wnsv {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-text-input.is-invalid.svelte-134wnsv:hover:not(:focus-within) {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-text-input.svelte-134wnsv :where(.svelte-134wnsv) {box-sizing:border-box;}
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-1luc9tv {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-1luc9tv {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-1luc9tv {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-1luc9tv::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input.svelte-1luc9tv: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-1luc9tv: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-1luc9tv:has(input:where(.svelte-1luc9tv):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-1luc9tv:has(input[readonly]:where(.svelte-1luc9tv)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1luc9tv:has(.mc-controls-options:where(.svelte-1luc9tv)) .mc-text-input__control:where(.svelte-1luc9tv) {padding-inline-end:0;}.mc-text-input.is-invalid.svelte-1luc9tv {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-1luc9tv: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-1luc9tv :where(.svelte-1luc9tv) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-controls-options.svelte-134wnsv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-134wnsv {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-134wnsv:hover .mc-controls-options__icon:where(.svelte-134wnsv) {fill:#4d4d4d;}.mc-controls-options__button.svelte-134wnsv: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-134wnsv {fill:#666666;}.mc-controls-options__button.svelte-134wnsv, .mc-controls-options__icon.svelte-134wnsv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-134wnsv {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-134wnsv {font-size:1rem;line-height:1.3;font-weight:600;color:#000000;}`};function ne(f,t){I(t,!0),K(f,te);let i=n(t,"id",7),_=n(t,"name",7),r=n(t,"value",15,""),g=n(t,"placeholder",7,""),v=n(t,"isinvalid",7,!1),u=n(t,"disabled",7,!1),x=n(t,"readonly",7,!1),y=n(t,"isclearable",7,!1),k=n(t,"clearlabel",7,"Clear content"),p=n(t,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),z=n(t,"onclear",7),L=n(t,"ontoggle",7),F=W(t,["$$slots","$$events","$$legacy","$$host","id","name","value","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","onclear","ontoggle"]),l=q(!1);function H(){J(l,!a(l)),L()(a(l))}var m=ee(),w=c(m);R(w),Q(w,()=>({class:"mc-password-input__control mc-text-input__control",id:i(),name:_(),type:a(l)?"text":"password",placeholder:g(),disabled:u(),readonly:x(),"aria-invalid":v(),...F}),void 0,void 0,"svelte-134wnsv");var V=S(w,2);{var M=e=>{var b=Y(),o=c(b);o.__click=[X,r,z];var h=S(c(o),2),Z=c(h,!0);d(h),d(o),d(b),B(()=>j(Z,k())),C(e,b)};O(V,e=>{y()&&r()&&e(M)})}var P=S(V,2);return U(P,{type:"button",role:"switch",tabindex:"0",get"aria-checked"(){return a(l)},size:"s",ghost:!0,get disabled(){return u()},onclick:H,children:(e,b)=>{var o=$(),h=c(o,!0);d(o),B(()=>j(h,a(l)?p().hide:p().show)),C(e,o)},$$slots:{default:!0}}),d(m),B(()=>N(m,1,`mc-password-input mc-text-input ${v()?"is-invalid":""}`,"svelte-134wnsv")),T(w,r),C(f,m),A({get id(){return i()},set id(e){i(e),s()},get name(){return _()},set name(e){_(e),s()},get value(){return r()},set value(e=""){r(e),s()},get placeholder(){return g()},set placeholder(e=""){g(e),s()},get isinvalid(){return v()},set isinvalid(e=!1){v(e),s()},get disabled(){return u()},set disabled(e=!1){u(e),s()},get readonly(){return x()},set readonly(e=!1){x(e),s()},get isclearable(){return y()},set isclearable(e=!1){y(e),s()},get clearlabel(){return k()},set clearlabel(e="Clear content"){k(e),s()},get buttonlabel(){return p()},set buttonlabel(e={show:"Show",hide:"Hide"}){p(e),s()},get onclear(){return z()},set onclear(e){z(e),s()},get ontoggle(){return L()},set ontoggle(e){L(e),s()}})}E(["click"]);customElements.define("m-password-input",G(ne,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{},onclear:{},ontoggle:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-button.svelte-1luc9tv {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1luc9tv:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1luc9tv:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1luc9tv {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1luc9tv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-1luc9tv {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-1luc9tv {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1luc9tv:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1luc9tv:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1luc9tv:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-controls-options.svelte-1luc9tv {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1luc9tv {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-1luc9tv:hover .mc-controls-options__icon:where(.svelte-1luc9tv) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1luc9tv: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-1luc9tv {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1luc9tv, .mc-controls-options__icon.svelte-1luc9tv {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1luc9tv {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function et(d,e){B(e,!0),G(d,tt);let h=r(e,"id",7),g=r(e,"name",7),i=r(e,"value",7),_=r(e,"placeholder",7),u=r(e,"isinvalid",7),v=r(e,"disabled",7),w=r(e,"readonly",7),x=r(e,"isclearable",7),k=r(e,"clearlabel",7,"Clear content"),b=r(e,"buttonlabel",23,()=>({show:"Show",hide:"Hide"})),m=J(!1);var F={get id(){return h()},set id(t){h(t),l()},get name(){return g()},set name(t){g(t),l()},get value(){return i()},set value(t){i(t),l()},get placeholder(){return _()},set placeholder(t){_(t),l()},get isinvalid(){return u()},set isinvalid(t){u(t),l()},get disabled(){return v()},set disabled(t){v(t),l()},get readonly(){return w()},set readonly(t){w(t),l()},get isclearable(){return x()},set isclearable(t){x(t),l()},get clearlabel(){return k()},set clearlabel(t="Clear content"){k(t),l()},get buttonlabel(){return b()},set buttonlabel(t={show:"Show",hide:"Hide"}){b(t),l()}},f=$(),o=n(f);R(o);var S=L(o,2);{var I=t=>{var y=Y(),z=n(y);z.__click=[X,i];var C=L(n(z),2),P=n(C,!0);s(C),s(z),s(y),M(()=>Z(P,k())),V(t,y)};Q(S,t=>{x()&&i()&&t(I)})}var a=L(S,2);E(a,1,H(["mc-button","mc-button--s","mc-button--ghost"]),"svelte-1luc9tv"),a.__click=[W,m];var j=n(a),O=n(j,!0);return s(j),s(a),s(f),M(()=>{E(f,1,H(["mc-password-input","mc-text-input",u()&&"is-invalid"]),"svelte-1luc9tv"),c(o,"id",h()),c(o,"name",g()),c(o,"type",p(m)?"text":"password"),c(o,"placeholder",_()),o.disabled=v(),o.readOnly=w(),c(o,"aria-invalid",u()),a.disabled=v(),c(a,"aria-checked",p(m)),Z(O,p(m)?b().hide:b().show)}),T(o,i),V(d,f),K(F)}q(["click"]);customElements.define("m-password-input",A(et,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},readonly:{},isclearable:{},clearlabel:{},buttonlabel:{}},[],[],!0,U));
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/passwordinput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  interface Props {\n    id: string;\n    name?: string;\n    value?: string | number;\n    placeholder?: string;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    isclearable?: boolean;\n    clearlabel?: string;\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(''),\n    placeholder = '',\n    isinvalid = false,\n    disabled = false,\n    readonly = false,\n    isclearable = false,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n    onclear,\n    ontoggle,\n    ...events\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n    ontoggle(isVisible);\n  }\n\n  function clearValue() {\n    value = '';\n    onclear();\n  }\n</script>\n\n<div class=\"mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}\">\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...events}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"button\"\n        onclick={clearValue}\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\n  <Button\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    aria-checked={isVisible}\n    size=\"s\"\n    ghost={true}\n    {disabled}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </Button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["clearValue","_","value","onclear","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","ontoggle","events","$.rest_props","isVisible","toggleVisibility","$.set","$$render","consequent","$.template_effect","$.set_text","text_1","$.get","$$value"],"mappings":"sXAgDW,SAAAA,EAAaC,EAAAC,EAAAC,EAAA,CACpBD,EAAQ,EAAE,EACVC,IAAO,CACT;;;;;;;;;;;+oCAnDF,qBA0BIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJJ,iBAAkB,EAAE,EACpBM,sBAAc,EAAE,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EACnBC,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAC1CX,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACLU,EAAAC,EAAAX,EAAA,8KAGDY,IAAmB,EAAK,EAEnB,SAAAC,GAAmB,CAC1BC,EAAAF,KAAaA,CAAS,CAAA,EACtBH,MAASG,CAAS,CAAA,CACpB,mHAaQA,CAAS,EAAG,OAAS,oEAKbT,EAAS,KACnBO,wFAOShB,EAAUE,EAAAC,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIV,KAAKmB,EAAAC,CAAA,mGAsBTJ,CAAS,kBAEhB,sCAEEC,4CAEFI,EAAA,IAAAC,EAAAC,EAAAC,EAAAR,CAAS,EAAGJ,EAAW,EAAC,KAAOA,IAAY,IAAI,CAAA,qFAzCbL,EAAS,EAAG,aAAe,EAAE,GAAA,gBAAA,CAAA,6IA1BpD,GAAE,2DACN,GAAE,uDACJ,GAAK,qDACN,GAAK,qDACL,GAAK,2DACF,GAAK,yDACN,gBAAe,yCACZ,IAAA,YAAAkB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,oHAiB9C"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-password-input',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the password input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the password input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the password input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the password input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, applies an invalid state to the password input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the password input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the password input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the password input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n    /**\n     * Labels of the button displayed when showing or hiding the password.\n     */\n    buttonlabel?: {\n      show: string;\n      hide: string;\n    };\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    readonly,\n    isclearable,\n    clearlabel = 'Clear content',\n    buttonlabel = { show: 'Show', hide: 'Hide' },\n  }: Props = $props();\n\n  let isVisible = $state(false);\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid']}>\n  <input\n    class=\"mc-password-input__control mc-text-input__control\"\n    {id}\n    {name}\n    type={isVisible ? 'text' : 'password'}\n    bind:value\n    {placeholder}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        class=\"mc-controls-options__button\"\n        type=\"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\n  <button\n    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}\n    type=\"button\"\n    role=\"switch\"\n    tabindex=\"0\"\n    {disabled}\n    aria-checked={isVisible}\n    onclick={toggleVisibility}\n  >\n    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/password-input';\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["toggleVisibility","_","isVisible","$.set","resetValue","__1","value","id","$.prop","$$props","name","placeholder","isinvalid","disabled","readonly","isclearable","clearlabel","buttonlabel","$$value","$$render","consequent","$.set_text","text_1","$.get","customElementForwardEvents"],"mappings":"uVAyEW,SAAAA,EAAgBC,EAAAC,EAAG,CAC1BC,EAAAD,KAAaA,CAAS,CAAA,CACxB,OAEME,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;g7GA7EtC,qBA2DIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,EAC5BC,6BAAgB,KAAM,OAAQ,KAAM,MAAM,EAAA,EAGxCf,IAAmB,EAAK,mdAJb,gBAAe,yCACZ,IAAA,YAAAgB,EAAA,CAAA,KAAM,OAAQ,KAAM,QAAM,kFA6B7Bd,EAAUE,CAAA,qDAQuBU,EAAU,CAAA,CAAA,kBAbrDD,EAAW,GAAIT,KAAKa,EAAAC,CAAA,0BAmBf,YAAa,eAAgB,kBAAkB,CAAA,EAAA,gBAAA,aAM9CpB,EAAgBE,CAAA,6DArChB,oBAAqB,gBAAiBU,KAAa,4EAKtDV,CAAS,EAAG,OAAS,UAAU,0EAKvBU,GAAS,sCA0BTV,CAAS,CAAA,EAGhBmB,EAAAC,EAAAC,EAAArB,CAAS,EAAGe,EAAW,EAAC,KAAOA,EAAW,EAAC,IAAI,sBAzC1D,8LA3EYO"}

package/dist/components/passwordinput/PasswordInput.spec.js

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import PasswordInput from './PasswordInput.svelte';
+import { tick } from 'svelte';
+describe('m-password-input component', () => {
+    const baseProps = {
+        id: 'password-input',
+        value: '',
+    };
+    it('renders input with type password initially', () => {
+        render(PasswordInput, { props: baseProps });
+        const input = document.querySelector('input');
+        expect(input).toBeTruthy();
+        expect(input.type).toBe('password');
+    });
+    it('toggles password visibility on button click', async () => {
+        const { getByRole, getByText } = render(PasswordInput, {
+            props: baseProps,
+        });
+        const toggleBtn = getByRole('switch');
+        const input = document.querySelector('input');
+        expect(input.type).toBe('password');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
+        expect(getByText('Show')).toBeTruthy();
+        await fireEvent.click(toggleBtn);
+        await tick();
+        expect(input.type).toBe('text');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('true');
+        expect(getByText('Hide')).toBeTruthy();
+        await fireEvent.click(toggleBtn);
+        await tick();
+        expect(input.type).toBe('password');
+        expect(toggleBtn.getAttribute('aria-checked')).toBe('false');
+    });
+    it('shows clear button when isclearable is true and value is not empty', async () => {
+        const { container, component } = render(PasswordInput, {
+            props: { ...baseProps, isclearable: true, value: 'secret' },
+        });
+        const clearBtn = container.querySelector('.mc-controls-options__button');
+        expect(clearBtn).toBeTruthy();
+        await fireEvent.click(clearBtn);
+        await tick();
+        const input = container.querySelector('input');
+        expect(input.value).toBe('');
+    });
+    it('does not show clear button when value is empty even if isclearable is true', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, isclearable: true, value: '' },
+        });
+        const clearBtn = container.querySelector('.mc-controls-options__button');
+        expect(clearBtn).toBeNull();
+    });
+    it('respects disabled and readonly props', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+        const toggleBtn = container.querySelector('button[role="switch"]');
+        expect(toggleBtn.disabled).toBe(true);
+    });
+    it('adds is-invalid class when isinvalid is true', () => {
+        const { container } = render(PasswordInput, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        expect(container.firstChild).toHaveClass('is-invalid');
+    });
+    it('uses custom clearlabel and buttonlabel props', () => {
+        const clearlabel = 'Clear password';
+        const buttonlabel = { show: 'Reveal', hide: 'Conceal' };
+        const { getByText } = render(PasswordInput, {
+            props: {
+                ...baseProps,
+                isclearable: true,
+                value: 'x',
+                clearlabel,
+                buttonlabel,
+            },
+        });
+        expect(getByText(clearlabel)).toBeTruthy();
+        expect(getByText(buttonlabel.show)).toBeTruthy();
+    });
+});

package/dist/components/passwordinput/PasswordInput.stories.d.ts

@@ -1,14 +1,11 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A password input is used for entering secure information like passwords.
- * It supports visibility toggle and optional clear functionality.
- *
- * The `MPasswordInput` component is the **Svelte / WebComponent** implementation of the Mozaic Design System password input field.
- * Refer to the full specification in [the Mozaic documentation](https://mozaic.adeo.cloud/components/form/password-input).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const WithClearButton: 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 Clearable: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=PasswordInput.stories.d.ts.map

package/dist/components/passwordinput/PasswordInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA6DE,IAAI;AA3DT,wBA2DU;AAsBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,eAAe,KAAoB,CAAC;AAmBjD,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"PasswordInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAuCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAMvB,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/passwordinput/PasswordInput.stories.js

@@ -1,132 +1,75 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * A password input is used for entering secure information like passwords.
- * It supports visibility toggle and optional clear functionality.
- *
- * The `MPasswordInput` component is the **Svelte / WebComponent** implementation of the Mozaic Design System password input field.
- * Refer to the full specification in [the Mozaic documentation](https://mozaic.adeo.cloud/components/form/password-input).
- */
-export default {
-    title: 'Form Elements/Password Input',
-    tags: ['autodocs', 'new'],
-    argTypes: {
-        id: {
-            description: 'Unique identifier for the input',
-            control: 'text',
-        },
-        name: {
-            description: 'Name attribute for form submission',
-            control: 'text',
-        },
-        value: {
-            description: 'Value of the password input',
-            control: 'text',
-        },
-        placeholder: {
-            description: 'Placeholder text',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'Displays input as invalid',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Disables the input field',
-            control: 'boolean',
-        },
-        readonly: {
-            description: 'Makes the input read-only',
-            control: 'boolean',
-        },
-        isclearable: {
-            description: 'Show a clear button when value is set',
-            control: 'boolean',
-        },
-        clearLabel: {
-            description: 'Label for the clear button',
-            control: 'text',
-        },
-        buttonLabel: {
-            description: 'Show/Hide button labels',
-            control: 'object',
-        },
-        onclear: {
-            description: 'Event that occurs when the clear button is clicked',
-            action: 'onclear',
-            table: {
-                category: 'Events',
-            },
-        },
-        ontoggle: {
-            description: 'Event that occurs when the show/hide button is clicked',
-            action: 'ontoggle',
-            table: {
-                category: 'Events',
-            },
-        },
+const meta = {
+    title: 'Form Elements/PasswordInput',
+    component: 'm-password-input',
+    args: {
+        id: 'passwordInputId',
+        placeholder: 'Enter your password',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-password-input
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        placeholder=${ifDefined(args.placeholder)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        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-password-input>
+    `;
     },
 };
-const Template = (args) => {
-    const input = document.createElement('m-password-input');
-    input.setAttribute('id', args.id || 'password-input');
-    if (args.name)
-        input.setAttribute('name', args.name);
-    if (args.placeholder)
-        input.setAttribute('placeholder', args.placeholder || 'Password input');
-    if (args.disabled)
-        input.setAttribute('disabled', args.disabled);
-    if (args.readonly)
-        input.setAttribute('readonly', args.readonly);
-    if (args.isinvalid)
-        input.setAttribute('isinvalid', args.isinvalid);
-    if (args.isclearable)
-        input.setAttribute('isclearable', args.isclearable);
-    if (args.clearlabel)
-        input.setAttribute('clearlabel', args.clearlabel);
-    if (args.buttonlabel)
-        input.setAttribute('buttonlabel', JSON.stringify(args.buttonlabel));
-    if (args.value)
-        input.setAttribute('value', args.value);
-    input.addEventListener('input', action('input'));
-    input.onclear = action('onclear');
-    input.ontoggle = action('ontoggle');
-    return input;
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Enter password',
-};
-Default.play = async ({ canvasElement }) => {
-    const inputEl = canvasElement.querySelector('m-password-input');
-    const input = inputEl?.shadowRoot?.querySelector('input');
-    expect(input).not.toBeNull();
-    await userEvent.type(input, 'supersecret');
-    expect(input).toHaveValue('supersecret');
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'Magic-word-123',
+    },
 };
-export const WithClearButton = Template.bind({});
-WithClearButton.args = {
-    placeholder: 'Enter password',
-    value: '123456',
-    isclearable: true,
-    clearlabel: 'Clear',
+export const Default = {};
+export const Clearable = {
+    args: {
+        id: 'clearableId',
+        value: 'Magic-word-123',
+        isclearable: true,
+    },
 };
-WithClearButton.play = async ({ canvasElement }) => {
-    const el = canvasElement.querySelector('m-password-input');
-    const clearBtn = el?.shadowRoot?.querySelector('.mc-controls-options__button');
-    const input = el?.shadowRoot?.querySelector('input');
-    expect(input).toHaveValue('123456');
-    await userEvent.click(clearBtn);
-    expect(input).toHaveValue('');
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
-    placeholder: 'Cannot edit',
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const input = canvasElement
-        .querySelector('m-password-input')
-        ?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };