@mozaic-ds/web-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/components/textinput/Textinput.svelte

@@ -1,143 +0,0 @@
-<svelte:options customElement="m-textinput" />
-
-<script lang="ts">
-  import type { TextInputSize, TextInputType } from './textinput.types';
-
-  interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    inputtype?: TextInputType;
-    isvalid: boolean;
-    isinvalid: boolean;
-    disabled?: boolean;
-    size?: TextInputSize;
-    iconname: string;
-    rightalign: boolean;
-    min: string;
-    max: string;
-    minlength: number;
-    maxlength: number;
-    required?: boolean;
-    clearlabel?: string;
-    isclearable?: boolean;
-  }
-
-  let {
-    name,
-    value,
-    placeholder,
-    inputtype = 'text',
-    isvalid,
-    isinvalid,
-    disabled = false,
-    size = 'm',
-    iconname,
-    rightalign,
-    min,
-    max,
-    minlength,
-    maxlength,
-    required = false,
-    clearlabel = 'Clear content',
-    isclearable = false,
-    ...events
-  }: Props = $props();
-
-  let inputType = $derived(inputtype);
-  let displayClear = $derived(isclearable && value ? true : false);
-
-  function getClasses(
-    isValid: boolean,
-    isInvalid: boolean,
-    size: TextInputSize,
-    iconname: string,
-  ): string {
-    const classes = ['mc-text-input', 'mc-field__input'];
-
-    if (isValid) {
-      classes.push('is-valid');
-    }
-
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
-
-    if (size === 's') {
-      classes.push('mc-text-input--s');
-    }
-
-    if (iconname) {
-      classes.push('mc-left-icon-input__input');
-    }
-
-    if (rightalign) {
-      classes.push('right-align');
-    }
-
-    return classes.join(' ');
-  }
-
-  const setType = (node: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    node.type = inputType;
-  };
-
-  function resetValue() {
-    console.log(value);
-    value = '';
-  }
-</script>
-
-<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
-  {#if $$slots.icon}
-    <span class="mc-text-input__icon">
-      <slot name="icon" />
-    </span>
-  {/if}
-  <input
-    bind:value
-    use:setType
-    class="mc-text-input__control"
-    aria-invalid={isinvalid}
-    {name}
-    id={name}
-    {placeholder}
-    {disabled}
-    {min}
-    {max}
-    {minlength}
-    {maxlength}
-    spellcheck="false"
-    {required}
-    {...events}
-  />
-  <!-- Control options -->
-  {#if displayClear}
-    <div class="mc-controls-options js-control-options">
-      <!-- Clear Button -->
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
-        <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}
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/controls-options';
-  @use '@mozaic-ds/styles/components/text-input';
-
-  .right-align {
-    text-align: right;
-  }
-</style>

package/dist/components/toggle/Toggle.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './Toggle.svelte'
-export default _default
-export {}

package/dist/components/toggle/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options customElement=\"m-toggle\" />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n  }: Props = $props();\n\n  let dispatch = createEventDispatcher();\n\n  function handleState(): void {\n    checked = !checked;\n    dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'\n    ? ' mc-toggle--m'\n    : ''}\"\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      {checked}\n      {disabled}\n      onclick={handleState}\n    />\n    {#if label}\n      <span class=\"mc-toggle__label\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["handleState","_","checked","dispatch","name","$.prop","$$props","disabled","size","label","createEventDispatcher","$$render","consequent"],"mappings":"yQAwBW,SAAAA,EAAoBC,EAAAC,EAAAC,EAAA,CAC3BD,GAAWA,GAAO,EAClBC,EAAS,SAAUD,GAAO,CAC5B;;8kPAZEE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAOG,EAAAC,EAAA,UAAA,EAAA,EACPC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAGHH,EAAWO,EAAqB,0CAqBvBV,EAAWE,EAAAC,CAAA,6DAGYM,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAE,EAAAC,CAAA,gDAdOH,EAAK,EAA8B,GAA3B,2BAA6B,EAAA,KAAGD,EAAI,IAAK,IAChE,gBACA,KAAE,EAAA,GAAA,eAAA,WAKEJ,GAAI,gMArBC,GAAK,6CACT,IAAG"}

package/dist/components/toggle/Toggle.svelte

@@ -1,54 +0,0 @@
-<svelte:options customElement="m-toggle" />
-
-<script lang="ts">
-  import type { ToggleSize } from './toggle.types';
-  import { createEventDispatcher } from 'svelte';
-
-  interface Props {
-    name: string;
-    checked: boolean;
-    disabled?: boolean;
-    size?: ToggleSize;
-    label: string;
-  }
-
-  let {
-    name,
-    checked = $bindable(),
-    disabled = false,
-    size = 'm',
-    label,
-  }: Props = $props();
-
-  let dispatch = createEventDispatcher();
-
-  function handleState(): void {
-    checked = !checked;
-    dispatch('change', checked);
-  }
-</script>
-
-<div
-  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'
-    ? ' mc-toggle--m'
-    : ''}"
->
-  <label class="mc-toggle__container">
-    <input
-      class="mc-toggle__input"
-      id={name}
-      {name}
-      type="checkbox"
-      {checked}
-      {disabled}
-      onclick={handleState}
-    />
-    {#if label}
-      <span class="mc-toggle__label">{label}</span>
-    {/if}
-  </label>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/toggle';
-</style>