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

package/dist/components/button/Button.svelte

@@ -1,133 +0,0 @@
-<svelte:options customElement={{ tag: 'm-button' }} />
-
-<script lang="ts">
-  import type {
-    ButtonIconMode,
-    ButtonSize,
-    ButtonStyle,
-    ButtonType,
-  } from './button.types';
-
-  import Loader from '../loader/Loader.svelte';
-
-  interface Props {
-    appearance?: ButtonStyle | undefined;
-    size?: ButtonSize;
-    ghost?: boolean;
-    outlined?: boolean;
-    iconname: string | undefined;
-    iconmode: ButtonIconMode | undefined;
-    disabled?: boolean;
-    type?: ButtonType;
-    isloading?: boolean;
-    [key: string]: any;
-  }
-
-  let {
-    appearance = 'standard',
-    size = 'm',
-    ghost = false,
-    outlined = false,
-    iconname,
-    iconmode,
-    disabled = false,
-    type = 'button',
-    isloading = false,
-    ...events
-  }: Props = $props();
-
-  function generateIconName(
-    size: ButtonSize,
-    iconMode: ButtonIconMode,
-    iconName: string,
-  ): string {
-    const isIconOnly = iconMode === 'only';
-    let iconSize: string;
-
-    switch (size) {
-      case 's':
-        iconSize = '24px';
-        break;
-      case 'm':
-        iconSize = isIconOnly ? '32px' : '24px';
-        break;
-      case 'l':
-        iconSize = isIconOnly ? '100%' : '32px';
-        break;
-    }
-
-    return `${iconName} size="${iconSize}" `;
-  }
-</script>
-
-<button
-  class="mc-button {size ? `mc-button--${size}` : ''} {appearance
-    ? `mc-button--${appearance}`
-    : ''}"
-  class:mc-button--ghost={ghost}
-  class:mc-button--outlined={outlined}
-  class:mc-button--icon-only={iconmode == 'only'}
-  class:mc-button--loading={isloading}
-  {disabled}
-  {type}
-  {...events}
->
-  {#if isloading}
-    <Loader
-      theme="standard"
-      style="color: currentColor; position: absolute;"
-      size="m"
-      text=""
-    />
-  {/if}
-  {#if (iconname || $$slots.icon) && iconmode === 'left'}
-    <span class="mc-button__icon">
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {/if}
-
-  {#if (iconname || $$slots.icon) && iconmode === 'only'}
-    <span class="mc-button__icon">
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {:else}
-    <span class="mc-button__label" class:hidden={isloading}>
-      <slot />
-    </span>
-  {/if}
-
-  {#if (iconname || $$slots.icon) && iconmode === 'right'}
-    <span class="mc-button__icon">
-      {#if $$slots.icon}
-        <slot name="icon" />
-      {:else if iconname}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {/if}
-</button>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/button';
-
-  .mc-button__icon {
-    pointer-events: none;
-  }
-
-  .hidden {
-    visibility: hidden;
-  }
-
-  .loader-style {
-    color: currentColor;
-    position: absolute;
-  }
-</style>

package/dist/components/button/IconButton.d.ts

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

package/dist/components/button/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  {@html `<${generateIconName(size, iconname)} />`}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props","generateIconName","iconName","iconSize"],"mappings":";;69VAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,gHAGI,SAAAK,EAAiBV,EAAkBW,EAA0B,KAChEC,SAEIZ,EAAI,KACL,IACHY,EAAW,iBAER,IACHA,EAAW,iBAER,IACHA,EAAW,aAIL,MAAA,GAAAD,CAAQ,UAAUC,CAAQ,IACtC,+CAaWF,EAAiBV,EAAI,EAAEG,EAAQ,CAAA,CAAA,KAAA,iEATDH,EACvB,EAAA,cAAAA,MACd,KAAE,EAAA,KAAGD,EAA2B,EAAA,cAAAA,EAAU,IAAK,KAAE,EAAA,4BAKjDS,0BAJoBP,EAAK,wBACFC,EAAQ,8EAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ"}

package/dist/components/checkbox/Checkbox.d.ts

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

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    id: string;\n    checked: boolean;\n    indeterminate: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    label: string;\n    ischecked: boolean;\n  }\n\n  let {\n    name = 'checkbox',\n    id,\n    indeterminate,\n    disabled = false,\n    isinvalid = false,\n    label,\n    ischecked,\n    ...events\n  }: Props = $props();\n\n  let isChecked = $state(ischecked);\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked={isChecked}\n    {...events}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["name","id","$.prop","$$props","indeterminate","disabled","isinvalid","label","ischecked","events","$.rest_props","isChecked","$$render","consequent","$.bind_checked","input","$.get","$$value"],"mappings":";;;;;;;;0EAmBI,IAAAA,eAAO,UAAU,EACjBC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACNM,EAAAC,EAAAP,EAAA,mHAGDQ,MAAmBH,EAAS,CAAA,CAAA,gGAiBlBR,GAAI,MAA8BO,GAAK,oBADhDA,EAAK,GAAAK,EAAAC,CAAA,gGAPMP,EAAS,6CAKnBG,oBANcH,EAAS,CAAA,sBAKbQ,EAAAC,EAAA,IAAAC,EAAAL,CAAS,OAATA,EAASM,CAAA,CAAA,8CAvBhB,WAAU,6JAGN,GAAK,uDACJ,GAAK"}

package/dist/components/checkbox/Checkbox.svelte

@@ -1,54 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-checkbox',
-  }}
-/>
-
-<script lang="ts">
-  interface Props {
-    name: string;
-    id: string;
-    checked: boolean;
-    indeterminate: boolean;
-    disabled?: boolean;
-    isinvalid?: boolean;
-    label: string;
-    ischecked: boolean;
-  }
-
-  let {
-    name = 'checkbox',
-    id,
-    indeterminate,
-    disabled = false,
-    isinvalid = false,
-    label,
-    ischecked,
-    ...events
-  }: Props = $props();
-
-  let isChecked = $state(ischecked);
-</script>
-
-<div class="mc-checkbox">
-  <input
-    {id}
-    type="checkbox"
-    class="mc-checkbox__input"
-    class:is-invalid={isinvalid}
-    aria-invalid={isinvalid}
-    {name}
-    {disabled}
-    {indeterminate}
-    bind:checked={isChecked}
-    {...events}
-  />
-  {#if label}
-    <label for={name} class="mc-checkbox__label">{label}</label>
-  {/if}
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/checkbox';
-  @use '@mozaic-ds/styles/components/field';
-</style>

package/dist/components/checkboxgroup/checkboxGroup.d.ts

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

package/dist/components/checkboxgroup/checkboxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  interface Props {\n    id: string;\n    options: Array<CheckboxGroupOption>;\n    legend: string;\n    selected: Array<String>;\n  }\n\n  let { id, options, legend, selected, onchange }: Props = $props();\n  let selectedValues = $state(selected);\n  function selectValue() {\n    onchange(selectedValues);\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}\"\n            id={opt.id}\n            name={opt.name}\n            checked={opt.checked}\n            disabled={opt.disabled}\n            indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={selectedValues}\n            value={opt.name}\n            onchange={selectValue}\n          />\n          {#if opt.label}\n            <label for={opt.id} class=\"mc-checkbox__label\">{opt.label}</label>\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["selectValue","_","onchange","selectedValues","id","$.prop","$$props","options","legend","selected","$$render","consequent","$.each","div_1","opt","$.set_attribute","label","$.get","$.set_text","text_1","consequent_1","$.set_class","input","$.set_checked","input_value","$$value"],"mappings":"qUAsBW,SAAAA,EAAcC,EAAAC,EAAAC,EAAA,CACrBD,MAASC,CAAc,CAAA,CACzB;;;;;;;;2FAJMC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEJ,EAAQG,EAAAC,EAAA,WAAA,CAAA,EACzCH,MAAwBM,EAAQ,CAAA,CAAA,wEAU7BD,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAME,EAAAC,CAAA,iBAMnBC,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAKA,EAAI,MAATA,IAAG,yCAaLd,EAAWE,EAAAC,CAAA,0DAGTY,EAAAC,EAAA,MAAAC,EAAAH,CAAG,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAG,EAAC,KAAK,oBADtDG,EAAAH,CAAG,EAAC,OAAKJ,EAAAU,CAAA,gBAXeC,EAAAC,EAAA,EAAA,uBAAAL,EAAAH,CAAG,EAAC,UAAY,cAAgB,KAAE,EAAA,GAAA,gBAAA,EACzDC,EAAAO,EAAA,KAAAL,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAO,EAAA,OAAAL,EAAAH,CAAG,EAAC,IAAI,EACLS,EAAAD,EAAAL,EAAAH,CAAG,EAAC,OAAO,EACVQ,EAAA,SAAAL,EAAAH,CAAG,EAAC,SACCQ,EAAA,cAAAL,EAAAH,CAAG,EAAC,cACLC,EAAAO,EAAA,eAAAL,EAAAH,CAAG,EAAC,SAAS,EAEpBU,KAAAA,EAAAP,EAAAH,CAAG,EAAC,QAAJQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAG,EAAC,OAAJ,KAAA,GAAAG,EAAAH,CAAG,EAAC,sBAAJG,EAAAH,CAAG,EAAC,OADCX,CAAc,QAAdA,EAAcsB,CAAA"}

package/dist/components/checkboxgroup/checkboxGroup.svelte

@@ -1,63 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-checkbox-group',
-    props: {
-      options: { reflect: true, type: 'Array', attribute: 'options' },
-    },
-    shadow: 'none',
-  }}
-/>
-
-<script lang="ts">
-  import type { CheckboxGroupOption } from './checkboxgroup.types';
-
-  interface Props {
-    id: string;
-    options: Array<CheckboxGroupOption>;
-    legend: string;
-    selected: Array<String>;
-  }
-
-  let { id, options, legend, selected, onchange }: Props = $props();
-  let selectedValues = $state(selected);
-  function selectValue() {
-    onchange(selectedValues);
-  }
-</script>
-
-<div class="checkbox-group-container" {id}>
-  <fieldset class="mc-field mc-field--group">
-    {#if legend && legend.length}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-    <div class="mc-field__container">
-      {#each options as opt (opt.id)}
-        <div class="mc-checkbox mc-field__item">
-          <input
-            type="checkbox"
-            class="mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}"
-            id={opt.id}
-            name={opt.name}
-            checked={opt.checked}
-            disabled={opt.disabled}
-            indeterminate={opt.indeterminate}
-            aria-invalid={opt.isinvalid}
-            bind:group={selectedValues}
-            value={opt.name}
-            onchange={selectValue}
-          />
-          {#if opt.label}
-            <label for={opt.id} class="mc-checkbox__label">{opt.label}</label>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </fieldset>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/checkbox';
-  @use '@mozaic-ds/styles/components/field';
-</style>

package/dist/components/field/Field.d.ts

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

package/dist/components/field/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;8EAsBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,4HAUfN,GAAS,0EAEGG,EAAO,eACLD,EAAS,QAE1BD,GAAO,qBAPPC,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK"}

package/dist/components/field/Field.svelte

@@ -1,66 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-field',
-    shadow: 'none',
-  }}
-/>
-
-<script lang="ts">
-  interface Props {
-    id: string;
-    label: string;
-    requirementtext: string;
-    helpid: string;
-    helptext: string;
-    messageid: string;
-    message: string;
-    isinvalid?: boolean;
-    isvalid?: boolean;
-    [key: string]: any;
-  }
-
-  let {
-    id,
-    label,
-    requirementtext,
-    helpid,
-    helptext,
-    messageid,
-    message,
-    isinvalid = false,
-    isvalid = false,
-  }: Props = $props();
-</script>
-
-<div class="mc-field">
-  <label for={id} class="mc-field__label">
-    {label}
-    {#if requirementtext}
-      <span class="mc-field__requirement" aria-hidden="true">
-        {requirementtext}
-      </span>
-    {/if}
-  </label>
-  {#if helpid && helptext}
-    <span id={helpid} class="mc-field__help">
-      {helptext}
-    </span>
-  {/if}
-  <div class="mc-field__content">
-    <slot />
-  </div>
-  {#if isinvalid || isvalid}
-    <span
-      id={messageid}
-      class="mc-field__validation-message"
-      class:is-valid={isvalid}
-      class:is-invalid={isinvalid}
-    >
-      {message}
-    </span>
-  {/if}
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/field';
-</style>

package/dist/components/iconbutton/IconButton.svelte

@@ -1,62 +0,0 @@
-<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />
-
-<script lang="ts">
-  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';
-
-  interface Props {
-    appearance?: ButtonStyle | undefined;
-    size?: ButtonSize;
-    ghost?: boolean;
-    outlined?: boolean;
-    iconname: string;
-    disabled?: boolean;
-    type?: ButtonType;
-    [key: string]: any;
-  }
-
-  let {
-    appearance = 'standard',
-    size = 'm',
-    ghost = false,
-    outlined = false,
-    iconname,
-    disabled = false,
-    type = 'button',
-    ...events
-  }: Props = $props();
-
-  function generateIconName(size: ButtonSize, iconName: string): string {
-    let iconSize: string;
-
-    switch (size) {
-      case 's':
-        iconSize = '20px';
-        break;
-      case 'm':
-        iconSize = '24px';
-        break;
-      case 'l':
-        iconSize = '32px';
-        break;
-    }
-
-    return `${iconName} size="${iconSize}" `;
-  }
-</script>
-
-<button
-  class="mc-button mc-button--icon-button {size
-    ? `mc-button--${size}`
-    : ''} {appearance ? `mc-button--${appearance}` : ''}"
-  class:mc-button--ghost={ghost}
-  class:mc-button--outlined={outlined}
-  {disabled}
-  {type}
-  {...events}
->
-  {@html `<${generateIconName(size, iconname)} />`}
-</button>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/button';
-</style>

package/dist/components/link/Link.d.ts

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

package/dist/components/link/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","sources":["../../../node_modules/svelte/src/internal/client/dom/legacy/lifecycle.js","../../../node_modules/svelte/src/internal/client/dom/legacy/misc.js","../../../node_modules/svelte/src/internal/flags/legacy.js","../../../src/components/link/Link.svelte"],"sourcesContent":["/** @import { ComponentContextLegacy } from '#client' */\nimport { run, run_all } from '../../../shared/utils.js';\nimport { component_context } from '../../context.js';\nimport { derived } from '../../reactivity/deriveds.js';\nimport { user_pre_effect, user_effect } from '../../reactivity/effects.js';\nimport { deep_read_state, get, untrack } from '../../runtime.js';\n\n/**\n * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects\n * @param {boolean} [immutable]\n */\nexport function init(immutable = false) {\n\tconst context = /** @type {ComponentContextLegacy} */ (component_context);\n\n\tconst callbacks = context.l.u;\n\tif (!callbacks) return;\n\n\tlet props = () => deep_read_state(context.s);\n\n\tif (immutable) {\n\t\tlet version = 0;\n\t\tlet prev = /** @type {Record<string, any>} */ ({});\n\n\t\t// In legacy immutable mode, before/afterUpdate only fire if the object identity of a prop changes\n\t\tconst d = derived(() => {\n\t\t\tlet changed = false;\n\t\t\tconst props = context.s;\n\t\t\tfor (const key in props) {\n\t\t\t\tif (props[key] !== prev[key]) {\n\t\t\t\t\tprev[key] = props[key];\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changed) version++;\n\t\t\treturn version;\n\t\t});\n\n\t\tprops = () => get(d);\n\t}\n\n\t// beforeUpdate\n\tif (callbacks.b.length) {\n\t\tuser_pre_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.b);\n\t\t});\n\t}\n\n\t// onMount (must run before afterUpdate)\n\tuser_effect(() => {\n\t\tconst fns = untrack(() => callbacks.m.map(run));\n\t\treturn () => {\n\t\t\tfor (const fn of fns) {\n\t\t\t\tif (typeof fn === 'function') {\n\t\t\t\t\tfn();\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\t// afterUpdate\n\tif (callbacks.a.length) {\n\t\tuser_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.a);\n\t\t});\n\t}\n}\n\n/**\n * Invoke the getter of all signals associated with a component\n * so they can be registered to the effect this function is called in.\n * @param {ComponentContextLegacy} context\n * @param {(() => void)} props\n */\nfunction observe_all(context, props) {\n\tif (context.l.s) {\n\t\tfor (const signal of context.l.s) get(signal);\n\t}\n\n\tprops();\n}\n","import { set, source } from '../../reactivity/sources.js';\nimport { get } from '../../runtime.js';\nimport { is_array } from '../../../shared/utils.js';\n\n/**\n * Under some circumstances, imports may be reactive in legacy mode. In that case,\n * they should be using `reactive_import` as part of the transformation\n * @param {() => any} fn\n */\nexport function reactive_import(fn) {\n\tvar s = source(0);\n\n\treturn function () {\n\t\tif (arguments.length === 1) {\n\t\t\tset(s, get(s) + 1);\n\t\t\treturn arguments[0];\n\t\t} else {\n\t\t\tget(s);\n\t\t\treturn fn();\n\t\t}\n\t};\n}\n\n/**\n * @this {any}\n * @param {Record<string, unknown>} $$props\n * @param {Event} event\n * @returns {void}\n */\nexport function bubble_event($$props, event) {\n\tvar events = /** @type {Record<string, Function[] | Function>} */ ($$props.$$events)?.[\n\t\tevent.type\n\t];\n\n\tvar callbacks = is_array(events) ? events.slice() : events == null ? [] : [events];\n\n\tfor (var fn of callbacks) {\n\t\t// Preserve \"this\" context\n\t\tfn.call(this, event);\n\t}\n}\n\n/**\n * Used to simulate `$on` on a component instance when `compatibility.componentApi === 4`\n * @param {Record<string, any>} $$props\n * @param {string} event_name\n * @param {Function} event_callback\n */\nexport function add_legacy_event_listener($$props, event_name, event_callback) {\n\t$$props.$$events ||= {};\n\t$$props.$$events[event_name] ||= [];\n\t$$props.$$events[event_name].push(event_callback);\n}\n\n/**\n * Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`.\n * Needs component accessors so that it can call the setter of the prop. Therefore doesn't\n * work for updating props in `$$props` or `$$restProps`.\n * @this {Record<string, any>}\n * @param {Record<string, any>} $$new_props\n */\nexport function update_legacy_props($$new_props) {\n\tfor (var key in $$new_props) {\n\t\tif (key in this) {\n\t\t\tthis[key] = $$new_props[key];\n\t\t}\n\t}\n}\n","import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n","<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  export let href: string;\n  export let target: string;\n  export let style: LinkStyle = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let inline = false;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(\n    style: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (style) {\n      classes.push(`mc-link--${style}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(style, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["init","immutable","context","component_context","callbacks","props","deep_read_state","version","prev","d","derived","changed","key","get","user_pre_effect","observe_all","run_all","user_effect","fns","untrack","run","fn","signal","bubble_event","$$props","event","events","_a","is_array","enable_legacy_mode_flag","href","$.prop","target","style","disabled","size","inline","iconposition","setClasses","classes","$.set","userClass","attributes","$$restProps","$.get","$$render","consequent","consequent_1","$0"],"mappings":"kWAWO,SAASA,GAAKC,EAAY,GAAO,CACvC,MAAMC,EAAiDC,EAEjDC,EAAYF,EAAQ,EAAE,EAC5B,GAAI,CAACE,EAAW,OAEhB,IAAIC,EAAQ,IAAMC,EAAgBJ,EAAQ,CAAC,EAE3C,GAAID,EAAW,CACd,IAAIM,EAAU,EACVC,EAA2C,CAAA,EAG/C,MAAMC,EAAIC,EAAQ,IAAM,CACvB,IAAIC,EAAU,GACd,MAAMN,EAAQH,EAAQ,EACtB,UAAWU,KAAOP,EACbA,EAAMO,CAAG,IAAMJ,EAAKI,CAAG,IAC1BJ,EAAKI,CAAG,EAAIP,EAAMO,CAAG,EACrBD,EAAU,IAGZ,OAAIA,GAASJ,IACNA,CACV,CAAG,EAEDF,EAAQ,IAAMQ,EAAIJ,CAAC,CACrB,CAGKL,EAAU,EAAE,QACfU,EAAgB,IAAM,CACrBC,EAAYb,EAASG,CAAK,EAC1BW,EAAQZ,EAAU,CAAC,CACtB,CAAG,EAIFa,EAAY,IAAM,CACjB,MAAMC,EAAMC,EAAQ,IAAMf,EAAU,EAAE,IAAIgB,CAAG,CAAC,EAC9C,MAAO,IAAM,CACZ,UAAWC,KAAMH,EACZ,OAAOG,GAAO,YACjBA,EAAI,CAGN,CACH,CAAE,EAGGjB,EAAU,EAAE,QACfa,EAAY,IAAM,CACjBF,EAAYb,EAASG,CAAK,EAC1BW,EAAQZ,EAAU,CAAC,CACtB,CAAG,CAEH,CAQA,SAASW,EAAYb,EAASG,EAAO,CACpC,GAAIH,EAAQ,EAAE,EACb,UAAWoB,KAAUpB,EAAQ,EAAE,EAAGW,EAAIS,CAAM,EAG7CjB,EAAO,CACR,CCpDO,SAASkB,GAAaC,EAASC,EAAO,OAC5C,IAAIC,GAA+DC,EAAAH,EAAQ,WAAR,YAAAG,EAClEF,EAAM,MAGHrB,EAAYwB,EAASF,CAAM,EAAIA,EAAO,MAAO,EAAGA,GAAU,KAAO,CAAE,EAAG,CAACA,CAAM,EAEjF,QAASL,KAAMjB,EAEdiB,EAAG,KAAK,KAAMI,CAAK,CAErB,CCtCAI,EAAyB;;s/DCEZC,EAAYC,EAAAP,EAAA,OAAA,EAAA,EACZQ,EAAcD,EAAAP,EAAA,SAAA,EAAA,EACdS,iBAAmB,MAAS,EAC5BC,oBAAW,EAAK,EAChBC,gBAAiB,GAAG,EACpBC,kBAAS,EAAK,EACdC,wBAA6C,MAAS,EAMxD,SAAAC,EACPL,EACAE,EACAC,EACQ,CACF,MAAAG,GAAW,SAAS,EAEtB,OAAAN,GACFM,EAAQ,KAAI,YAAaN,CAAK,EAAA,EAE5BE,GACFI,EAAQ,KAAI,YAAaJ,CAAI,EAAA,EAE3BC,EACFG,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,iBAvBGC,EAAAC,IAAoB,KAAK,oBACzBD,EAAAE,MAAkBC,EAAW,oBACtB,OAAAC,EAAAF,CAAU,EAAC,iHAiChBL,MAAiB,QAAMQ,EAAAC,CAAA,iIAQvBT,MAAiB,SAAOQ,EAAAE,CAAA,oDAba,MAAA,GAAAC,GAAA,EAAA,KAAAd,EAAA,EACtC,cACA,KAAE,EAAA,IAAAU,EAAGH,CAAS,GAAA,EAAA,QACdC,CAAU,sBAHN,IAAAJ,EAAWL,EAAK,EAAEE,EAAI,EAAEC,EAAM,CAAA","x_google_ignoreList":[0,1,2]}

package/dist/components/link/Link.svelte

@@ -1,65 +0,0 @@
-<svelte:options customElement="m-link" />
-
-<script lang="ts">
-  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
-  export let href: string;
-  export let target: string;
-  export let style: LinkStyle = undefined;
-  export let disabled = false;
-  export let size: LinkSize = 'm';
-  export let inline = false;
-  export let iconposition: LinkIconPosition | undefined = undefined;
-
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  function setClasses(
-    style: LinkStyle,
-    size: LinkSize,
-    inline: boolean,
-  ): string {
-    const classes = ['mc-link'];
-
-    if (style) {
-      classes.push(`mc-link--${style}`);
-    }
-    if (size) {
-      classes.push(`mc-link--${size}`);
-    }
-    if (inline) {
-      classes.push('mc-link--inline');
-    } else {
-      classes.push('mc-link--stand-alone');
-    }
-    return classes.join(' ');
-  }
-</script>
-
-<a
-  on:click
-  {href}
-  {target}
-  class="{setClasses(style, size, inline)} {disabled
-    ? 'is-disabled'
-    : ''} {userClass}"
-  {...attributes}
->
-  {#if iconposition === 'left'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
-    </span>
-  {/if}
-  <span class="mc-link__label">
-    <slot />
-  </span>
-  {#if iconposition === 'right'}
-    <span class="mc-link__icon">
-      <slot name="icon" />
-    </span>
-  {/if}
-</a>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/link';
-</style>

package/dist/components/loader/Loader.d.ts

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

package/dist/components/loader/Loader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text: string;\n    style: string;\n  }\n\n  let { size, theme, text, style }: Props = $props();\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)} {style}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","$.prop","$$props","theme","text","style","setClasses","classes","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;uCAYQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAErB,SAAAI,EAAWN,EAAkBG,EAAoB,CAClD,MAAAI,GAAW,WAAW,EAExB,OAAAP,GACFO,EAAQ,KAAI,cAAeP,CAAI,EAAA,EAG7BG,GACFI,EAAQ,KAAI,cAAeJ,CAAK,EAAA,EAG3BI,EAAQ,KAAK,GAAG,CACzB,UAESC,EAAWR,EAAkB,KAChCS,SAEIT,EAAI,KACL,IACHS,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,UAESC,EAAgBV,EAAkB,KACrCW,SAEIX,EAAI,KACL,IACHW,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,qGAqBKP,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAQ,EAAAC,CAAA,2GAhBCP,EAAWN,IAAMG,GAAK,EAKnB,IAAAK,EAAWR,GAAI,EAMnB,IAAAU,EAAgBV,EAAI,CAAA"}

package/dist/components/loader/Loader.svelte

@@ -1,89 +0,0 @@
-<svelte:options customElement={{ tag: 'm-loader' }} />
-
-<script lang="ts">
-  import type { LoaderSize, LoaderTheme } from './loader.types';
-
-  interface Props {
-    size: LoaderSize;
-    theme: LoaderTheme;
-    text: string;
-    style: string;
-  }
-
-  let { size, theme, text, style }: Props = $props();
-
-  function setClasses(size: LoaderSize, theme: LoaderTheme) {
-    const classes = ['mc-loader'];
-
-    if (size) {
-      classes.push(`mc-loader--${size}`);
-    }
-
-    if (theme) {
-      classes.push(`mc-loader--${theme}`);
-    }
-
-    return classes.join(' ');
-  }
-
-  function setViewBox(size: LoaderSize) {
-    let viewBox: string;
-
-    switch (size) {
-      case 's':
-        viewBox = '0 0 24 24';
-        break;
-      case 'l':
-        viewBox = '0 0 64 64';
-        break;
-      default:
-        viewBox = '0 0 32 32';
-    }
-
-    return viewBox;
-  }
-
-  function setCircleRadius(size: LoaderSize) {
-    let circleRadius: number;
-
-    switch (size) {
-      case 's':
-        circleRadius = 6;
-        break;
-      case 'l':
-        circleRadius = 19;
-        break;
-      default:
-        circleRadius = 9;
-    }
-
-    return circleRadius;
-  }
-</script>
-
-<div class={setClasses(size, theme)} {style}>
-  <span class="mc-loader__spinner">
-    <svg
-      class="mc-loader__icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={setViewBox(size)}
-    >
-      <circle
-        class="mc-loader__path"
-        cx="50%"
-        cy="50%"
-        r={setCircleRadius(size)}
-      />
-    </svg>
-  </span>
-
-  {#if text}
-    <span class="mc-loader__text">
-      {text}
-    </span>
-  {/if}
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/loader';
-</style>

package/dist/components/overlay/Overlay.d.ts

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

package/dist/components/overlay/Overlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;gVAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,wIAGIH,EAAS,EAAA,wBACCC,GAAW,0DAJ3C,GAAK"}

package/dist/components/overlay/Overlay.svelte

@@ -1,21 +0,0 @@
-<svelte:options customElement="m-overlay" />
-
-<script lang="ts">
-  interface Props {
-    isvisible?: boolean;
-    dialoglabel: string;
-  }
-
-  let { isvisible = false, dialoglabel }: Props = $props();
-</script>
-
-<div class="mc-overlay" class:is-visible={isvisible}>
-  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <!-- @slot Use this slot to insert a centered content inside the overlay -->
-    <slot />
-  </div>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/overlay';
-</style>

package/dist/components/overlay/OverlayLoader.d.ts

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