@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/pagination/Pagination.svelte

@@ -0,0 +1,133 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import {
+    onMount,
+    get_current_component,
+    createEventDispatcher,
+  } 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(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  let component: HTMLElement;
+  onMount(() => {
+    const select = component?.querySelector('.mc-select') as HTMLSelectElement;
+    const options = select.options;
+    const selectedOption = options.namedItem(value.toString());
+    if (selectedOption) {
+      selectedOption.selected = true;
+    }
+  });
+
+  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}
+  bind:this={component}
+>
+  {#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}
+          {@const optionValue = number + 1}
+          <option
+            name={String(optionValue)}
+            selected={optionValue == value}
+            value={optionValue}
+            >{prefixlabel} {optionValue} {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/dist/components/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    id: string;
+    value?: number;
+    total?: number;
+    compact?: boolean;
+    selectLabel?: string;
+    pagelabel?: string;
+    prefixlabel?: string;
+    [key: string]: any;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "value">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/components/pagination/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAgGH,QAAA,MAAM,UAAU,gDAAsC,CAAC;AACvD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

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

package/dist/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/dist/components/passwordinput/PasswordInput.js

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

package/dist/components/passwordinput/PasswordInput.svelte

@@ -1,263 +1,64 @@
-<svelte:options
-  customElement={{
-    tag: 'm-password-input',
-  }}
-/>
+<svelte:options tag={null} />
 
 <script lang="ts">
-  import Button from '../button/Button.svelte';
-  interface Props {
-    id: string;
-    name?: string;
-    value?: string | number;
-    placeholder?: string;
-    isinvalid?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    isclearable?: boolean;
-    clearlabel?: string;
-    buttonlabel?: {
-      show: string;
-      hide: string;
-    };
-    [key: string]: any;
-  }
+  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;
 
-  let {
-    id,
-    name,
-    value = $bindable(''),
-    placeholder = '',
-    isinvalid = false,
-    disabled = false,
-    readonly = false,
-    isclearable = false,
-    clearlabel = 'Clear content',
-    buttonlabel = { show: 'Show', hide: 'Hide' },
-    onclear,
-    ontoggle,
-    ...events
-  }: Props = $props();
+  const forwardEvents = createEventForwarder(get_current_component());
 
-  let isVisible = $state(false);
+  function setType(isvisible: boolean) {
+    return isvisible ? 'text' : 'password';
+  }
 
-  function toggleVisibility() {
-    isVisible = !isVisible;
-    ontoggle(isVisible);
+  function onClick(): void {
+    isvisible = !isvisible;
   }
 
-  function clearValue() {
-    value = '';
-    onclear();
+  function setButtonLabel(isvisible: boolean) {
+    return isvisible ? 'Hide' : 'Show';
   }
+
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
 </script>
 
-<div class="mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}">
+<div class="mc-password-input" {...$$restProps}>
   <input
-    class="mc-password-input__control mc-text-input__control"
+    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}
-    {name}
-    type={isVisible ? 'text' : 'password'}
-    bind:value
     {placeholder}
     {disabled}
-    {readonly}
-    aria-invalid={isinvalid}
-    {...events}
+    {required}
+    {...attributes}
   />
-  {#if isclearable && value}
-    <div class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        type="button"
-        onclick={clearValue}
-      >
-        <svg class="mc-controls-options__icon" 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"
-          />
-        </svg>
-        <span class="mc-controls-options__label">{clearlabel}</span>
-      </button>
-    </div>
-  {/if}
 
-  <Button
+  <button
     type="button"
+    class="mc-password-input__button"
     role="switch"
-    tabindex="0"
-    aria-checked={isVisible}
-    size="s"
-    ghost={true}
-    {disabled}
-    onclick={toggleVisibility}
+    aria-checked={isvisible ? 'true' : 'false'}
+    aria-pressed={isvisible ? 'true' : 'false'}
+    on:click={onClick}
   >
-    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
-  </Button>
+    {setButtonLabel(isvisible)}
+  </button>
 </div>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-password-input .mc-button {
-  min-width: 4rem;
-  margin: 0.5rem;
-}
-
-/* stylelint-disable string-no-newline */
-.mc-text-input {
-  transition: box-shadow 200ms ease;
-  background-color: var(--forms-color-background-default, #ffffff);
-  border: 1px solid var(--forms-color-border-default, #666666);
-  border-radius: 0.25rem;
-  transition: all ease 200ms;
-  color: var(--forms-color-text-default, #000000);
-  display: block;
-  width: 100%;
-  height: 3rem;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.mc-text-input__control {
-  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] {
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */
-  appearance: textfield;
-}
-.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-}
-.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
-  appearance: none;
-}
-.mc-text-input__control::placeholder {
-  color: var(--forms-color-placeholder, #666666);
-}
-.mc-text-input__icon {
-  fill: var(--forms-color-icon-default, #666666);
-  height: 1.5rem;
-  width: 1.5rem;
-  flex-shrink: 0;
-}
-.mc-text-input: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:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
-}
-.mc-text-input:has(input:disabled) {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
-  cursor: not-allowed;
-  border-color: transparent;
-  box-shadow: none;
-  color: var(--forms-color-text-disabled, #737373);
-  pointer-events: none;
-}
-.mc-text-input:has(input[readonly]) {
-  border-color: var(--forms-color-border-read-only, #cccccc);
-  pointer-events: none;
-}
-.mc-text-input:has(.mc-text-input__icon) {
-  padding-inline-start: 0.6875rem;
-}
-.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
-  padding-inline-start: 0;
-}
-.mc-text-input:has(.mc-controls-options) {
-  padding-inline-end: 0.6875rem;
-}
-.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
-  padding-inline-end: 0;
-}
-.mc-text-input--s {
-  height: 2rem;
-}
-.mc-text-input--s .mc-text-input__control {
-  padding: 0.375rem 0.6875rem;
-  font-size: 0.875rem;
-  line-height: 1.3;
-}
-.mc-text-input--s:has(.mc-text-input__icon) {
-  padding-inline-start: 0.4375rem;
-}
-.mc-text-input--s:has(.mc-controls-options) {
-  padding-inline-end: 0.4375rem;
-}
-.mc-text-input.is-invalid {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
-}
-.mc-text-input.is-invalid:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
-}
-.mc-text-input * {
-  box-sizing: border-box;
-}
-
-/* stylelint-enable string-no-newline */
-.mc-controls-options {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  gap: 0.5rem;
-}
-.mc-controls-options__button {
-  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:hover .mc-controls-options__icon {
-  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
-}
-.mc-controls-options__button: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 {
-  fill: var(--forms-color-icon-clear, #666666);
-}
-.mc-controls-options__button, .mc-controls-options__icon {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.mc-controls-options__label {
-  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 {
-  font-size: 1rem;
-  line-height: 1.3;
-  font-weight: 600;
-  color: var(--forms-color-text-default, #000000);
-}</style>
+<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/dist/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/dist/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"}