@mozaic-ds/web-components 0.1.0

package/public/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onMount, get_current_component } from 'svelte/internal';\n\n  import { EventHandler } from '../../utilities/EventHandler';\n  export let total = 1;\n  export let value = 1;\n  export let light = false;\n  export let pagelabel: string;\n  export let prefixlabel = 'Page';\n  export let hrefprev = '';\n  export let hrefnext = '';\n\n  let eventHandler = new EventHandler();\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const component: any = get_current_component();\n  onMount(() => {\n    /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */\n    const select = component.shadowRoot.querySelector('.mc-select');\n    const options = select.options;\n    const selectedOption = options.namedItem(value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n    /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */\n  });\n\n  function dispatchPreviousPageEvent(): void {\n    value--;\n    eventHandler.dispatch('on-previous-page', value);\n  }\n\n  function dispatchNextPageEvent(): void {\n    value++;\n    eventHandler.dispatch('on-next-page', value);\n  }\n\n  function dispatchChangePageEvent(): void {\n    eventHandler.dispatch('on-update-page', value);\n  }\n</script>\n\n<nav\n  class=\"mc-pagination {light ? 'mc-pagination--light' : ''}\"\n  role=\"navigation\"\n  aria-label=\"pagination\"\n  {...$$restProps}\n>\n  {#if hrefprev}\n    <a\n      class=\"mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l\"\n      href={hrefprev}\n      aria-label=\"Previous page\"\n      disabled={Number(value) === 1 || Number(total) === 1}\n    >\n      <navigation-arrow-arrow--left-24px\n        size=\"100%\"\n        class=\"mc-pagination__button-icon mc-button__icon\"\n      />\n    </a>\n  {:else}\n    <button\n      class=\"mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l\"\n      aria-label=\"Previous page\"\n      disabled={Number(value) === 1 || Number(total) === 1}\n      on:click|preventDefault={dispatchPreviousPageEvent}\n    >\n      <navigation-arrow-arrow--left-24px\n        size=\"100%\"\n        class=\"mc-pagination__button-icon mc-button__icon\"\n      />\n    </button>\n  {/if}\n  {#if !light}\n    <div class=\"mc-pagination__field\">\n      <select\n        class=\"mc-select mc-pagination__select\"\n        disabled={Number(total) === 1}\n        bind:value\n        on:change={dispatchChangePageEvent}\n      >\n        {#each { length: total } as _, number}\n          <option\n            name={String(value)}\n            selected={number + 1 == value}\n            value={number + 1}\n            >{prefixlabel} {number + 1} {pagelabel} {total}</option\n          >\n        {/each}\n      </select>\n    </div>\n  {/if}\n  {#if hrefnext}\n    <a\n      class=\"mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l\"\n      href={hrefnext}\n      aria-label=\"Next Page\"\n      disabled={Number(value) === Number(total) || Number(total) === 1}\n    >\n      <navigation-arrow-arrow--right-24px\n        size=\"100%\"\n        class=\"mc-pagination__button-icon mc-button__icon\"\n      />\n    </a>\n  {:else}\n    <button\n      class=\"mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l\"\n      aria-label=\"Previous page\"\n      disabled={Number(value) === Number(total) || Number(total) === 1}\n      on:click|preventDefault={dispatchNextPageEvent}\n    >\n      <navigation-arrow-arrow--right-24px\n        size=\"100%\"\n        class=\"mc-pagination__button-icon mc-button__icon\"\n      />\n    </button>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.button';\n  @import '@mozaic-ds/styles/components/c.select';\n  @import '@mozaic-ds/styles/components/c.pagination';\n</style>\n"],"names":["Number","ctx","insert","target","button","anchor","append","navigation_arrow_arrow__left_24px","a","each_value","length","i","div","select","t2_value","attr","option","option_name_value","String","__value","dirty","navigation_arrow_arrow__right_24px","create_if_block_2","create_if_block_1","create_if_block","nav","class","nav_class_value","total","$$props","value","light","pagelabel","prefixlabel","hrefprev","hrefnext","eventHandler","EventHandler","component","get_current_component","onMount","selectedOption","shadowRoot","querySelector","options","namedItem","selected","dispatch"],"mappings":"+qBAkEkC,IAAlBA,OAAOC,EAAW,KAAuB,IAAlBD,OAAOC,EAAK,YAH/CC,EAUQC,EAAAC,EAAAC,GAJNC,EAGCF,EAAAG,uBALwBN,EAAyB,+BADtB,IAAlBD,OAAOC,EAAW,KAAuB,IAAlBD,OAAOC,EAAK,yUAbvCA,EAAQ,uDAEc,IAAlBD,OAAOC,EAAW,KAAuB,IAAlBD,OAAOC,EAAK,aAJ/CC,EAUGC,EAAAK,EAAAH,GAJDC,EAGCE,EAAAD,4BAPKN,EAAQ,gBAEc,IAAlBD,OAAOC,EAAW,KAAuB,IAAlBD,OAAOC,EAAK,oEA4BlCQ,EAAA,CAAAC,OAAQT,EAAK,yBAApBS,OAAIC,GAAA,wJAJsB,IAAlBX,OAAOC,EAAK,sFAH1BC,EAgBKC,EAAAS,EAAAP,GAfHC,EAcQM,EAAAC,yGAVKZ,EAAuB,sCAEzBQ,EAAA,CAAAC,OAAQT,EAAK,YAApBS,OAAIC,GAAA,EAAA,iHAAJD,mBAJ0B,IAAlBV,OAAOC,EAAK,2GASFa,EAAAb,MAAS,EAAC,gCAAxBA,EAAW,2BAAgBA,EAAS,cAAGA,EAAK,IAHxCc,EAAAC,EAAA,OAAAC,EAAAC,OAAOjB,EAAK,kBACRA,EAAM,IAAG,GAAKA,EAAK,GACtBe,EAAAG,QAAAlB,MAAS,4BAHlBC,EAKAC,EAAAa,EAAAX,sEADIJ,EAAW,aAAgBA,EAAS,aAAGA,EAAK,IAHxC,EAAAmB,GAAAH,KAAAA,EAAAC,OAAOjB,EAAK,gCACRA,EAAM,IAAG,GAAKA,EAAK,6WAwBzBD,OAAOC,EAAK,MAAMD,OAAOC,EAAK,KAAuB,IAAlBD,OAAOC,EAAK,YAH3DC,EAUQC,EAAAC,EAAAC,GAJNC,EAGCF,EAAAiB,uBALwBpB,EAAqB,+BADpCD,OAAOC,EAAK,MAAMD,OAAOC,EAAK,KAAuB,IAAlBD,OAAOC,EAAK,0UAbnDA,EAAQ,mDAEJD,OAAOC,EAAK,MAAMD,OAAOC,EAAK,KAAuB,IAAlBD,OAAOC,EAAK,aAJ3DC,EAUGC,EAAAK,EAAAH,GAJDC,EAGCE,EAAAa,4BAPKpB,EAAQ,gBAEJD,OAAOC,EAAK,MAAMD,OAAOC,EAAK,KAAuB,IAAlBD,OAAOC,EAAK,yFAjDxDA,EAAQ,GAAAqB,yBAyBPrB,EAAK,IAAAsB,EAAAtB,0BAmBNA,EAAQ,GAAAuB,oDAjDSvB,EAAK,GAAG,uBAAyB,qDAGnDA,EAAW,iIAJjBC,EA2EKC,EAAAsB,EAAApB,+HA5CGJ,EAAK,kKA9BWA,EAAK,GAAG,uBAAyB,MAAE,CAAAyB,MAAAC,2DAGrD1B,EAAW,sKA1CJ2B,MAAAA,EAAQ,GAACC,GACTC,MAAAA,EAAQ,GAACD,GACTE,MAAAA,GAAQ,GAAKF,aACbG,GAAiBH,GACjBI,YAAAA,EAAc,QAAMJ,GACpBK,SAAAA,EAAW,IAAEL,GACbM,SAAAA,EAAW,IAAEN,EAEpBO,MAAmBC,EAGjB,MAAAC,EAAiBC,WACvBC,GAAO,KAEC,MAEAC,EAFSH,EAAUI,WAAWC,cAAc,cAC3BC,QACQC,UAAUf,GACrCW,IACFA,EAAeK,UAAW,sTAM5BhB,IAAKA,GACLM,EAAaW,SAAS,mBAAoBjB,mBAI1CA,IAAKA,GACLM,EAAaW,SAAS,eAAgBjB,eAItCM,EAAaW,SAAS,iBAAkBjB"}

package/public/components/pagination/Pagination.svelte

@@ -0,0 +1,127 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount, get_current_component } from 'svelte/internal';
+
+  import { EventHandler } from '../../utilities/EventHandler';
+  export let total = 1;
+  export let value = 1;
+  export let light = false;
+  export let pagelabel: string;
+  export let prefixlabel = 'Page';
+  export let hrefprev = '';
+  export let hrefnext = '';
+
+  let eventHandler = new EventHandler();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const component: any = get_current_component();
+  onMount(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
+    const select = component.shadowRoot.querySelector('.mc-select');
+    const options = select.options;
+    const selectedOption = options.namedItem(value);
+    if (selectedOption) {
+      selectedOption.selected = true;
+    }
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
+  });
+
+  function dispatchPreviousPageEvent(): void {
+    value--;
+    eventHandler.dispatch('on-previous-page', value);
+  }
+
+  function dispatchNextPageEvent(): void {
+    value++;
+    eventHandler.dispatch('on-next-page', value);
+  }
+
+  function dispatchChangePageEvent(): void {
+    eventHandler.dispatch('on-update-page', value);
+  }
+</script>
+
+<nav
+  class="mc-pagination {light ? 'mc-pagination--light' : ''}"
+  role="navigation"
+  aria-label="pagination"
+  {...$$restProps}
+>
+  {#if hrefprev}
+    <a
+      class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      href={hrefprev}
+      aria-label="Previous page"
+      disabled={Number(value) === 1 || Number(total) === 1}
+    >
+      <navigation-arrow-arrow--left-24px
+        size="100%"
+        class="mc-pagination__button-icon mc-button__icon"
+      />
+    </a>
+  {:else}
+    <button
+      class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      aria-label="Previous page"
+      disabled={Number(value) === 1 || Number(total) === 1}
+      on:click|preventDefault={dispatchPreviousPageEvent}
+    >
+      <navigation-arrow-arrow--left-24px
+        size="100%"
+        class="mc-pagination__button-icon mc-button__icon"
+      />
+    </button>
+  {/if}
+  {#if !light}
+    <div class="mc-pagination__field">
+      <select
+        class="mc-select mc-pagination__select"
+        disabled={Number(total) === 1}
+        bind:value
+        on:change={dispatchChangePageEvent}
+      >
+        {#each { length: total } as _, number}
+          <option
+            name={String(value)}
+            selected={number + 1 == value}
+            value={number + 1}
+            >{prefixlabel} {number + 1} {pagelabel} {total}</option
+          >
+        {/each}
+      </select>
+    </div>
+  {/if}
+  {#if hrefnext}
+    <a
+      class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      href={hrefnext}
+      aria-label="Next Page"
+      disabled={Number(value) === Number(total) || Number(total) === 1}
+    >
+      <navigation-arrow-arrow--right-24px
+        size="100%"
+        class="mc-pagination__button-icon mc-button__icon"
+      />
+    </a>
+  {:else}
+    <button
+      class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      aria-label="Previous page"
+      disabled={Number(value) === Number(total) || Number(total) === 1}
+      on:click|preventDefault={dispatchNextPageEvent}
+    >
+      <navigation-arrow-arrow--right-24px
+        size="100%"
+        class="mc-pagination__button-icon mc-button__icon"
+      />
+    </button>
+  {/if}
+</nav>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.button';
+  @import '@mozaic-ds/styles/components/c.select';
+  @import '@mozaic-ds/styles/components/c.pagination';
+</style>

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

@@ -0,0 +1,2 @@
+export type PaginationType = 'default' | 'light';
+//# sourceMappingURL=pagination.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.types.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC"}

package/public/components/passwordinput/PasswordInput.js

@@ -0,0 +1,2 @@
+import{S as e,i,a as t,b as n,f as r,s as o,c as m,e as s,d as l,t as a,n as h,g as p,z as c,h as d,j as u,B as x,l as g,k as f,m as b,o as z,H as w,p as v,r as M,q as I}from"../../index-c33b3772.js";import{c as k}from"../../EventForward-3dbb2f25.js";function A(e){let i,t,r,o,v,M,I,k,A,$,j=y(e[0])+"",E=[{class:"mc-password-input"},e[9]],C={};for(let e=0;e<E.length;e+=1)C=m(C,E[e]);return{c(){i=s("div"),t=s("input"),o=l(),v=s("button"),M=a(j),this.c=h,p(t,"type",r=D(e[0])),p(t,"class","mc-text-input mc-password-input__control"),p(t,"aria-invalid",e[4]),p(t,"spellcheck","false"),p(t,"id",e[1]),p(t,"placeholder",e[2]),t.disabled=e[5],t.required=e[6],c(t,"is-valid",e[3]),c(t,"is-invalid",e[4]),p(v,"type","button"),p(v,"class","mc-password-input__button"),p(v,"role","switch"),p(v,"aria-checked",I=e[0]?"true":"false"),p(v,"aria-pressed",k=e[0]?"true":"false"),d(i,C)},m(r,m){n(r,i,m),u(i,t),u(i,o),u(i,v),u(v,M),A||($=[x(e[7].call(null,t)),g(v,"click",e[8])],A=!0)},p(e,[n]){1&n&&r!==(r=D(e[0]))&&p(t,"type",r),16&n&&p(t,"aria-invalid",e[4]),2&n&&p(t,"id",e[1]),4&n&&p(t,"placeholder",e[2]),32&n&&(t.disabled=e[5]),64&n&&(t.required=e[6]),8&n&&c(t,"is-valid",e[3]),16&n&&c(t,"is-invalid",e[4]),1&n&&j!==(j=y(e[0])+"")&&f(M,j),1&n&&I!==(I=e[0]?"true":"false")&&p(v,"aria-checked",I),1&n&&k!==(k=e[0]?"true":"false")&&p(v,"aria-pressed",k),d(i,C=b(E,[{class:"mc-password-input"},512&n&&e[9]]))},i:h,o:h,d(e){e&&z(i),A=!1,w($)}}}function D(e){return e?"text":"password"}function y(e){return e?"Hide":"Show"}function $(e,i,t){const n=["id","placeholder","isvalid","isinvalid","disabled","required","isvisible"];let r=v(i,n),{id:o}=i,{placeholder:s}=i,{isvalid:l}=i,{isinvalid:a}=i,{disabled:h=!1}=i,{required:p=!1}=i,{isvisible:c=!1}=i;const d=k(M());return e.$$set=e=>{i=m(m({},i),I(e)),t(9,r=v(i,n)),"id"in e&&t(1,o=e.id),"placeholder"in e&&t(2,s=e.placeholder),"isvalid"in e&&t(3,l=e.isvalid),"isinvalid"in e&&t(4,a=e.isinvalid),"disabled"in e&&t(5,h=e.disabled),"required"in e&&t(6,p=e.required),"isvisible"in e&&t(0,c=e.isvisible)},[c,o,s,l,a,h,p,d,function(){t(0,c=!c)},r]}class j extends e{constructor(e){super();const m=document.createElement("style");m.textContent='.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-password-input{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-password-input__control.mc-text-input{border-right:none;border-bottom-right-radius:0;border-top-right-radius:0}.mc-password-input__button{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;font-family:"LeroyMerlin", sans-serif;font-weight:600;background-color:#ffffff;border:1px solid #666666;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#191919;display:block;position:relative;height:0;padding:0.875rem 0.9375rem;min-height:3rem}.mc-password-input__button:active,.mc-password-input__button:focus,.mc-password-input__button:hover{background-color:#e6e6e6}',this.shadowRoot.appendChild(m),i(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},$,A,o,{id:1,placeholder:2,isvalid:3,isinvalid:4,disabled:5,required:6,isvisible:0},null),e&&(e.target&&n(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["id","placeholder","isvalid","isinvalid","disabled","required","isvisible"]}get id(){return this.$$.ctx[1]}set id(e){this.$$set({id:e}),r()}get placeholder(){return this.$$.ctx[2]}set placeholder(e){this.$$set({placeholder:e}),r()}get isvalid(){return this.$$.ctx[3]}set isvalid(e){this.$$set({isvalid:e}),r()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),r()}get disabled(){return this.$$.ctx[5]}set disabled(e){this.$$set({disabled:e}),r()}get required(){return this.$$.ctx[6]}set required(e){this.$$set({required:e}),r()}get isvisible(){return this.$$.ctx[0]}set isvisible(e){this.$$set({isvisible:e}),r()}}export{j as default};
+//# sourceMappingURL=PasswordInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/passwordinput/PasswordInput.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 id: string;\n  export let placeholder: string;\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let disabled = false;\n  export let required = false;\n  export let isvisible = false;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function setType(isvisible: boolean) {\n    return isvisible ? 'text' : 'password';\n  }\n\n  function onClick(): void {\n    isvisible = !isvisible;\n  }\n\n  function setButtonLabel(isvisible: boolean) {\n    return isvisible ? 'Hide' : 'Show';\n  }\n</script>\n\n<div class=\"mc-password-input\" {...$$restProps}>\n  <input\n    use:forwardEvents\n    type={setType(isvisible)}\n    class=\"mc-text-input mc-password-input__control\"\n    class:is-valid={isvalid}\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    spellcheck=\"false\"\n    {id}\n    {placeholder}\n    {disabled}\n    {required}\n  />\n\n  <button\n    type=\"button\"\n    class=\"mc-password-input__button\"\n    role=\"switch\"\n    aria-checked={isvisible ? 'true' : 'false'}\n    aria-pressed={isvisible ? 'true' : 'false'}\n    on:click={onClick}\n  >\n    {setButtonLabel(isvisible)}\n  </button>\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.password-input';\n</style>\n"],"names":["t1_value","setButtonLabel","ctx","attr","input","input_type_value","setType","insert","target","div","anchor","append","button","dirty","set_data","t1","isvisible","id","$$props","placeholder","isvalid","isinvalid","disabled","required","forwardEvents","createEventForwarder","get_current_component","$$invalidate"],"mappings":"iSAmDKA,EAAAC,EAAeC,EAAS,IAAA,kCAvBMA,EAAW,wHAGpCC,EAAAC,EAAA,OAAAC,EAAAC,EAAQJ,EAAS,gFAITA,EAAS,oHAFPA,EAAO,qBACLA,EAAS,4GAabA,EAAS,GAAG,OAAS,8BACrBA,EAAS,GAAG,OAAS,wBApBvCK,EAyBKC,EAAAC,EAAAC,GAxBHC,EAYCF,EAAAL,UAEDO,EASQF,EAAAG,kDAHIV,EAAO,qBAlBX,EAAAW,GAAAR,KAAAA,EAAAC,EAAQJ,EAAS,6CAITA,EAAS,yHAFPA,EAAO,2BACLA,EAAS,IAiB1B,EAAAW,GAAAb,KAAAA,EAAAC,EAAeC,EAAS,IAAA,KAAAY,EAAAC,EAAAf,eAJXE,EAAS,GAAG,OAAS,4CACrBA,EAAS,GAAG,OAAS,8EApBJA,EAAW,wCAbnC,SAAAI,EAAQU,UACRA,EAAY,OAAS,WAOrB,SAAAf,EAAee,UACfA,EAAY,OAAS,+HAnBnBC,GAAUC,eACVC,GAAmBD,WACnBE,GAAgBF,aAChBG,GAAkBH,GAClBI,SAAAA,GAAW,GAAKJ,GAChBK,SAAAA,GAAW,GAAKL,GAChBF,UAAAA,GAAY,GAAKE,QAEtBM,EAAgBC,EAAqBC,+TAOzCC,EAAA,EAAAX,GAAaA"}

package/public/components/passwordinput/PasswordInput.svelte

@@ -0,0 +1,60 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let id: string;
+  export let placeholder: string;
+  export let isvalid: boolean;
+  export let isinvalid: boolean;
+  export let disabled = false;
+  export let required = false;
+  export let isvisible = false;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  function setType(isvisible: boolean) {
+    return isvisible ? 'text' : 'password';
+  }
+
+  function onClick(): void {
+    isvisible = !isvisible;
+  }
+
+  function setButtonLabel(isvisible: boolean) {
+    return isvisible ? 'Hide' : 'Show';
+  }
+</script>
+
+<div class="mc-password-input" {...$$restProps}>
+  <input
+    use:forwardEvents
+    type={setType(isvisible)}
+    class="mc-text-input mc-password-input__control"
+    class:is-valid={isvalid}
+    class:is-invalid={isinvalid}
+    aria-invalid={isinvalid}
+    spellcheck="false"
+    {id}
+    {placeholder}
+    {disabled}
+    {required}
+  />
+
+  <button
+    type="button"
+    class="mc-password-input__button"
+    role="switch"
+    aria-checked={isvisible ? 'true' : 'false'}
+    aria-pressed={isvisible ? 'true' : 'false'}
+    on:click={onClick}
+  >
+    {setButtonLabel(isvisible)}
+  </button>
+</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.password-input';
+</style>

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

@@ -0,0 +1,6 @@
+export type PwdInputType = 'password' | 'text';
+export interface PwdButtonLabel {
+    show?: string | undefined;
+    hide?: boolean | undefined;
+}
+//# sourceMappingURL=passwordinput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"passwordinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/passwordinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC5B"}