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

package/dist/components/pagination/Pagination.svelte

@@ -1,133 +1,212 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: 'm-pagination',
+  }}
+/>
 
 <script lang="ts">
-  import {
-    onMount,
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
+  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+  import Button from '../button/Button.svelte';
+  import IconButton from '../button/IconButton.svelte';
 
-  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 = '';
+  interface Props {
+    id: string;
+    value?: number;
+    total?: number;
+    compact?: boolean;
+    selectLabel?: string;
+    pagelabel?: string;
+    prefixlabel?: string;
+    [key: string]: any;
+  }
 
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
+  let {
+    id,
+    value = $bindable(1),
+    total = 10,
+    compact = false,
+    selectLabel = 'Page selector',
+    pagelabel = 'of',
+    prefixlabel = 'Page',
+    ...events
+  }: Props = $props();
 
-  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;
-    }
-  });
+  let selected = $state(Number(value));
+
+  const isFirstPage = $state(() => selected <= 1);
+  const isLastPage = $state(() => selected >= total);
 
-  function dispatchPreviousPageEvent(): void {
-    value--;
-    eventHandler.dispatch('on-previous-page', value);
+  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));
+
+  function previous() {
+    if (!isFirstPage()) {
+      selected = Number(selected) - 1;
+    }
   }
 
-  function dispatchNextPageEvent(): void {
-    value++;
-    eventHandler.dispatch('on-next-page', value);
+  function next() {
+    if (!isLastPage()) {
+      selected = Number(selected) + 1;
+    }
   }
 
-  function dispatchChangePageEvent(): void {
-    eventHandler.dispatch('on-update-page', value);
+  function onSelectChange(event: Event) {
+    const selected = Number((event.target as HTMLSelectElement).value);
+    value = selected;
   }
 </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}
+<nav class="mc-pagination" aria-label="pagination">
+  {#if !compact}
+    <Button
+      iconOnly
       aria-label="Previous page"
-      disabled={Number(value) === 1 || Number(total) === 1}
+      disabled={isFirstPage()}
+      onclick={previous}
     >
-      <navigation-arrow-arrow--left-24px
-        size="100%"
-        class="mc-pagination__button-icon mc-button__icon"
-      />
-    </a>
+      <ChevronLeft24 />
+    </Button>
   {:else}
-    <button
-      class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+    <IconButton
+      outlined
       aria-label="Previous page"
-      disabled={Number(value) === 1 || Number(total) === 1}
-      on:click|preventDefault={dispatchPreviousPageEvent}
+      disabled={isFirstPage()}
+      onclick={previous}
     >
-      <navigation-arrow-arrow--left-24px
-        size="100%"
-        class="mc-pagination__button-icon mc-button__icon"
-      />
-    </button>
+      <ChevronLeft24 slot="icon" />
+    </IconButton>
   {/if}
-  {#if !light}
+
+  {#if !compact}
     <div class="mc-pagination__field">
       <select
+        {id}
         class="mc-select mc-pagination__select"
-        disabled={Number(total) === 1}
-        bind:value
-        on:change={dispatchChangePageEvent}
+        aria-label={selectLabel}
+        disabled={total <= 1}
+        bind:value={selected}
+        onchange={onSelectChange}
       >
-        {#each { length: total } as _, number}
-          {@const optionValue = number + 1}
+        {#each pages() as page}
           <option
-            name={String(optionValue)}
-            selected={optionValue == value}
-            value={optionValue}
-            >{prefixlabel} {optionValue} {pagelabel} {total}</option
+            value={Number(page)}
+            selected={Number(page) == Number(selected)}
           >
+            {prefixlabel}
+            {page}
+            {pagelabel}
+            {total}
+          </option>
         {/each}
       </select>
     </div>
+  {:else}
+    <span class="mc-pagination__label" aria-current="page">
+      {prefixlabel}
+      {value}
+      {pagelabel}
+      {total}
+    </span>
   {/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}
+
+  {#if !compact}
+    <Button
+      iconOnly
+      aria-label="Next page"
+      disabled={isLastPage()}
+      onclick={next}
     >
-      <navigation-arrow-arrow--right-24px
-        size="100%"
-        class="mc-pagination__button-icon mc-button__icon"
-      />
-    </a>
+      <ChevronRight24 />
+    </Button>
   {: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}
+    <IconButton
+      outlined
+      aria-label="Next page"
+      disabled={isLastPage()}
+      onclick={next}
     >
-      <navigation-arrow-arrow--right-24px
-        size="100%"
-        class="mc-pagination__button-icon mc-button__icon"
-      />
-    </button>
+      <ChevronRight24 slot="icon" />
+    </IconButton>
   {/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>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-pagination {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-pagination__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+
+/* stylelint-disable string-no-newline */
+.mc-select {
+  appearance: none;
+  font-family: inherit;
+  transition: box-shadow 200ms ease;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  height: 3rem;
+  padding: 0 3rem 0 0.75rem;
+  background-position: right 1rem center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--radius-s, 0.25rem);
+  display: block;
+  width: 100%;
+  color: var(--forms-color-text-default, #000000);
+  background-color: var(--forms-color-background-default, #ffffff);
+  text-overflow: ellipsis;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+}
+.mc-select:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-select:focus {
+  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-select:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  border-color: transparent;
+  cursor: not-allowed;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-select--readonly {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-select.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-select.is-invalid:hover {
+  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-select--s {
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  height: 2rem;
+  padding: 0 2rem 0 0.5rem;
+  background-position: right 0.5rem center;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/components/passwordinput/PasswordInput.svelte

@@ -1,64 +1,263 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: 'm-password-input',
+  }}
+/>
 
 <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;
+  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;
+  }
 
-  const forwardEvents = createEventForwarder(get_current_component());
+  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();
 
-  function setType(isvisible: boolean) {
-    return isvisible ? 'text' : 'password';
-  }
+  let isVisible = $state(false);
 
-  function onClick(): void {
-    isvisible = !isvisible;
+  function toggleVisibility() {
+    isVisible = !isVisible;
+    ontoggle(isVisible);
   }
 
-  function setButtonLabel(isvisible: boolean) {
-    return isvisible ? 'Hide' : 'Show';
+  function clearValue() {
+    value = '';
+    onclear();
   }
-
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
 </script>
 
-<div class="mc-password-input" {...$$restProps}>
+<div class="mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}">
   <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"
+    class="mc-password-input__control mc-text-input__control"
     {id}
+    {name}
+    type={isVisible ? 'text' : 'password'}
+    bind:value
     {placeholder}
     {disabled}
-    {required}
-    {...attributes}
+    {readonly}
+    aria-invalid={isinvalid}
+    {...events}
   />
+  {#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"
-    aria-checked={isvisible ? 'true' : 'false'}
-    aria-pressed={isvisible ? 'true' : 'false'}
-    on:click={onClick}
+    tabindex="0"
+    aria-checked={isVisible}
+    size="s"
+    ghost={true}
+    {disabled}
+    onclick={toggleVisibility}
   >
-    {setButtonLabel(isvisible)}
-  </button>
+    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
+  </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>
+<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: 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 {
+  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] {
+  /* 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 var(--border-s, 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: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 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 var(--border-s, 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 var(--border-s, 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: var(--radius-full, 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: 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);
+}</style>