@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { tick } from 'svelte';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { clickOutside } from '../../utilities/ClickOutside';\n  import type { ListboxItems } from '../listbox/listbox.types';\n  import type { SelectSize } from '../select/select.types';\n\n  import Tag from '../tag/Tag.nested.svelte';\n  import Loader from '../loader/Loader.nested.svelte';\n  import Listbox from '../listbox/Listbox.nested.svelte';\n\n  export let maxwidth = '100%';\n  export let tagid: string;\n  export let taglabel = '';\n  export let placeholder = '-- Placeholder --';\n  export let disabled = false;\n  export let size: SelectSize = 'm';\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let loading = false;\n  export let items: string;\n  export let value: any;\n  export let open = false;\n  export let multiple = false;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let nosort = false;\n  export let clearfield = false;\n  export let layertitle = 'Title layer';\n  export let showmoretagslabel = 'Show more';\n  export let maxnumbertoshowtags = 12;\n  export let alltags = false;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const component: any = get_current_component();\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\n  let tag: any;\n  let tagWidth = '0px';\n  let tagValue: any;\n  let buttonvalue: string;\n  let sortedListItems: any;\n  let isfiltered = false;\n  let selectedItems: ListboxItems[] = [];\n  let openLayer: any = null;\n\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: localItems = parsedItems;\n  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n  $: setTagLabel = () => {\n    return listboxValue.length.toString() + ' ' + taglabel;\n  };\n  $: watchListboxValue(listboxValue);\n  $: setTagWidth(tagValue);\n  $: openState = open;\n  $: {\n    const eventName = openState ? 'open' : 'close';\n    eventHandler.dispatch(eventName, openState);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function clearListbox() {\n    listboxValue = multiple ? [] : '';\n    closeListBox();\n    eventHandler.dispatch('clear', true);\n  }\n\n  function removeTagSelected(itemSelectedId: any) {\n    listboxValue = listboxValue.filter(\n      (value: any) => value !== itemSelectedId,\n    );\n    eventHandler.dispatch('onchange', listboxValue);\n  }\n\n  function openLayerFn() {\n    openLayer = true;\n  }\n\n  function closeLayerFn() {\n    openLayer = null;\n  }\n\n  function closeListBox() {\n    openState = false;\n\n    if (multiple && !nosort) {\n      sortItems();\n    } else {\n      localItems = parsedItems;\n    }\n  }\n\n  function onChange() {\n    eventHandler.dispatch('onchange', listboxValue);\n\n    if (!multiple) {\n      closeListBox();\n    }\n  }\n\n  function getSelectedItems(val?: any) {\n    const value = val ? val : listboxValue;\n\n    const selectedItems = parsedItems.filter((item: ListboxItems) => {\n      return multiple\n        ? value.includes(item[datavalueexpr])\n        : value === item[datavalueexpr];\n    });\n\n    return selectedItems;\n  }\n\n  function sortItems() {\n    sortedListItems = parsedItems;\n    const selectedItems = getSelectedItems();\n\n    sortedListItems.sort((a: any, b: any) => {\n      const hasItemA = selectedItems.includes(a);\n      const hasItemB = selectedItems.includes(b);\n\n      if (hasItemA === hasItemB) {\n        return a[datavalueexpr] - b[datavalueexpr];\n      } else if (hasItemA < hasItemB) {\n        return 1;\n      } else {\n        return -1;\n      }\n    });\n\n    localItems = sortedListItems;\n  }\n\n  function onScrollEnd() {\n    eventHandler.dispatch('scrollend', true);\n  }\n\n  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\n  }\n\n  // Watch Functions\n  async function watchListboxValue(value: any) {\n    await tick();\n    selectedItems = getSelectedItems(value);\n    const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n\n    buttonvalue = seletedLabels.join(', ');\n\n    if (multiple) {\n      tagValue = value;\n    }\n  }\n\n  async function setTagWidth(tagValue: any) {\n    await tick();\n\n    tagWidth =\n      tag && tagValue && tagValue.length\n        ? `${\n            component.shadowRoot.querySelector('.mc-tag-removable')\n              .clientWidth + 8\n          }px`\n        : '0px';\n  }\n</script>\n\n<div\n  class=\"mc-dropdown\"\n  class:mc-dropdown--multi={multiple}\n  style=\"--dropdown-tag-width: {tagWidth}; --dropdown-width: {maxwidth};\"\n  use:clickOutside\n  on:outclick={closeListBox}\n  {...attributes}\n>\n  <div class=\"mc-dropdown__main\">\n    <!--  TAG REMOVABLE -->\n    {#if multiple && listboxValue.length > 0 && !alltags}\n      <Tag\n        id={tagid ? tagid : `autocompleteTag-${uuid}`}\n        class=\"mc-dropdown__tag\"\n        label={setTagLabel()}\n        size=\"s\"\n        type=\"removable\"\n        dark={false}\n        disabled={false}\n        href=\"\"\n        name=\"\"\n        selected={false}\n        value=\"\"\n        bind:this={tag}\n        on:tag-removed={clearListbox}\n      />\n    {/if}\n\n    <!-- TRIGGER BUTTON -->\n    <button\n      type=\"button\"\n      class=\"mc-select mc-dropdown__trigger\"\n      class:is-open={openState}\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n      class:mc-select--s={size === 's'}\n      {disabled}\n      on:click={() => (openState = !openState)}\n    >\n      {buttonvalue ? buttonvalue : placeholder}\n      {#if !multiple && buttonvalue && clearfield}\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          on:click|stopPropagation={() => {\n            clearListbox();\n          }}\n        >\n          <navigation-control-tag--cross-24px />\n        </button>\n      {/if}\n    </button>\n\n    <div class=\"mc-dropdown__tools\">\n      <!-- LOADER -->\n      {#if loading}\n        <Loader size=\"s\" theme=\"primary\" text=\"\" class=\"mc-dropdown__loader\" />\n      {/if}\n    </div>\n  </div>\n\n  <!-- LISTBOX -->\n  <Listbox\n    items={JSON.stringify(localItems)}\n    open={openState}\n    {multiple}\n    {isfiltered}\n    {emptysearchlabel}\n    {maxwidth}\n    {datatextexpr}\n    {datavalueexpr}\n    {selectall}\n    {labelselectall}\n    bind:value={listboxValue}\n    on:change={onChange}\n    on:scrollend={onScrollEnd}\n    on:select-all={onSelectAll}\n  />\n\n  {#if multiple && alltags}\n    <div class=\"tags-selected\">\n      {#each selectedItems as selectedItem, index}\n        {#if index < maxnumbertoshowtags}\n          <div class=\"tag-selected\">\n            <m-tag\n              id={selectedItem.id}\n              label={selectedItem.label}\n              size=\"s\"\n              type=\"removable\"\n              on:tag-removed={() => removeTagSelected(selectedItem.id)}\n            />\n          </div>\n        {/if}\n      {/each}\n      {#if listboxValue.length > maxnumbertoshowtags}\n        <div class=\"tag-selected\">\n          <m-tag\n            id=\"id-tag\"\n            label=\"({listboxValue.length}) {showmoretagslabel} \"\n            size=\"s\"\n            type=\"link\"\n            on:tag-selected={() => openLayerFn()}\n          />\n        </div>\n      {/if}\n    </div>\n  {/if}\n\n  <span class=\"mc-dropdown__tag\" style=\"display:none;\" />\n  <span class=\"mc-dropdown__loader\" style=\"display:none;\" />\n  <span class=\"mc-text-input mc-dropdown__trigger\" style=\"display:none;\" />\n  {#if multiple && alltags}\n    <div>\n      <m-layer\n        title={layertitle}\n        layertitletag=\"h3\"\n        isopen={openLayer}\n        on:layer-closed={() => closeLayerFn()}\n      >\n        <small slot=\"content\">\n          <div class=\"tags-selected\">\n            {#each selectedItems as selectedItem}\n              <div class=\"tag-selected\">\n                <m-tag\n                  id={selectedItem.id}\n                  label={selectedItem.label}\n                  size=\"s\"\n                  type=\"removable\"\n                  on:tag-removed={() => removeTagSelected(selectedItem.id)}\n                />\n              </div>\n            {/each}\n          </div>\n        </small>\n      </m-layer>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.select';\n  @import '@mozaic-ds/styles/components/c.dropdown';\n\n  // Dropdown\n  // NOTE: These styles with the \"!important\" allow to overload the edge effects\n  // due to the scoping applied by Svelte on the CSS selectors\n  .mc-dropdown {\n    &__tag {\n      position: absolute !important; // due to the Svelte CSS scope\n    }\n\n    &--multi {\n      .mc-dropdown__trigger {\n        padding-left: calc($mu075 + var(--dropdown-tag-width)) !important;\n      }\n    }\n  }\n\n  // Selected Tags\n  .tags-selected {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .tag-selected {\n    margin-top: 1em;\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n</style>\n"],"names":["ctx","insert","target","button","anchor","length","i","create_if_block_2","div","set_custom_element_data","m_tag","m_tag_id_value","id","m_tag_label_value","label","append","dirty","if_block","create_if_block_3","div1","m_layer","small","div0","if_block0","create_if_block_6","create_if_block_5","create_if_block_4","JSON","stringify","if_block3","create_if_block_1","if_block4","create_if_block","style","div2_style_value","toggle_class","div2","span0","span1","span2","set_data","t1","t1_value","current","isfiltered","maxwidth","$$props","tagid","taglabel","placeholder","disabled","size","isvalid","isinvalid","loading","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","clearfield","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","component","get_current_component","uuid","Math","random","tag","tagValue","buttonvalue","sortedListItems","eventHandler","EventHandler","tagWidth","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","removeTagSelected","itemSelectedId","filter","openLayerFn","$$invalidate","closeLayerFn","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","watchListboxValue","shadowRoot","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","e","detail","$$value","value$1","selectedItem"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/dropdown/Dropdown.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { tick } from 'svelte';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { clickOutside } from '../../utilities/ClickOutside';\n  import type { ListboxItems } from '../listbox/listbox.types';\n  import type { SelectSize } from '../select/select.types';\n\n  import Tag from '../tag/Tag.nested.svelte';\n  import Loader from '../loader/Loader.nested.svelte';\n  import Listbox from '../listbox/Listbox.nested.svelte';\n\n  export let maxwidth = '100%';\n  export let tagid: string;\n  export let taglabel = '';\n  export let placeholder = '-- Placeholder --';\n  export let disabled = false;\n  export let size: SelectSize = 'm';\n  export let isvalid: boolean;\n  export let isinvalid: boolean;\n  export let loading = false;\n  export let items: string;\n  export let value: any;\n  export let open = false;\n  export let multiple = false;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let nosort = false;\n  export let clearfield = false;\n  export let layertitle = 'Title layer';\n  export let showmoretagslabel = 'Show more';\n  export let maxnumbertoshowtags = 12;\n  export let alltags = false;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const component: any = get_current_component();\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\n  let tag: any;\n  let tagWidth = '0px';\n  let tagValue: any;\n  let buttonvalue: string;\n  let sortedListItems: any;\n  let isfiltered = false;\n  let selectedItems: ListboxItems[] = [];\n  let openLayer: any = null;\n\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: localItems = parsedItems;\n  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n  $: setTagLabel = () => {\n    return listboxValue.length.toString() + ' ' + taglabel;\n  };\n  $: watchListboxValue(listboxValue);\n  $: setTagWidth(tagValue);\n  $: openState = open;\n  $: {\n    const eventName = openState ? 'open' : 'close';\n    eventHandler.dispatch(eventName, openState);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function clearListbox() {\n    listboxValue = multiple ? [] : '';\n    closeListBox();\n    eventHandler.dispatch('clear', true);\n  }\n\n  function removeTagSelected(itemSelectedId: any) {\n    listboxValue = listboxValue.filter(\n      (value: any) => value !== itemSelectedId,\n    );\n    eventHandler.dispatch('onchange', listboxValue);\n  }\n\n  function openLayerFn() {\n    openLayer = true;\n  }\n\n  function closeLayerFn() {\n    openLayer = null;\n  }\n\n  function closeListBox() {\n    openState = false;\n\n    if (multiple && !nosort) {\n      sortItems();\n    } else {\n      localItems = parsedItems;\n    }\n  }\n\n  function onChange() {\n    eventHandler.dispatch('onchange', listboxValue);\n\n    if (!multiple) {\n      closeListBox();\n    }\n  }\n\n  function getSelectedItems(val?: any) {\n    const value = val ? val : listboxValue;\n\n    const selectedItems = parsedItems.filter((item: ListboxItems) => {\n      return multiple\n        ? value.includes(item[datavalueexpr])\n        : value === item[datavalueexpr];\n    });\n\n    return selectedItems;\n  }\n\n  function sortItems() {\n    sortedListItems = parsedItems;\n    const selectedItems = getSelectedItems();\n\n    sortedListItems.sort((a: any, b: any) => {\n      const hasItemA = selectedItems.includes(a);\n      const hasItemB = selectedItems.includes(b);\n\n      if (hasItemA === hasItemB) {\n        return a[datavalueexpr] - b[datavalueexpr];\n      } else if (hasItemA < hasItemB) {\n        return 1;\n      } else {\n        return -1;\n      }\n    });\n\n    localItems = sortedListItems;\n  }\n\n  function onScrollEnd() {\n    eventHandler.dispatch('scrollend', true);\n  }\n\n  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\n  }\n\n  // Watch Functions\n  async function watchListboxValue(value: any) {\n    await tick();\n    selectedItems = getSelectedItems(value);\n    const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n\n    buttonvalue = seletedLabels.join(', ');\n\n    if (multiple) {\n      tagValue = value;\n    }\n  }\n\n  async function setTagWidth(tagValue: any) {\n    await tick();\n\n    tagWidth =\n      tag && tagValue && tagValue.length\n        ? `${\n            component.shadowRoot.querySelector('.mc-tag-removable')\n              .clientWidth + 8\n          }px`\n        : '0px';\n  }\n</script>\n\n<div\n  class=\"mc-dropdown\"\n  class:mc-dropdown--multi={multiple}\n  style=\"--dropdown-tag-width: {tagWidth}; --dropdown-width: {maxwidth};\"\n  use:clickOutside\n  on:outclick={closeListBox}\n  {...attributes}\n>\n  <div class=\"mc-dropdown__main\">\n    <!--  TAG REMOVABLE -->\n    {#if multiple && listboxValue.length > 0 && !alltags}\n      <Tag\n        id={tagid ? tagid : `autocompleteTag-${uuid}`}\n        class=\"mc-dropdown__tag\"\n        label={setTagLabel()}\n        size=\"s\"\n        type=\"removable\"\n        dark={false}\n        disabled={false}\n        href=\"\"\n        name=\"\"\n        selected={false}\n        value=\"\"\n        bind:this={tag}\n        on:tag-removed={clearListbox}\n      />\n    {/if}\n\n    <!-- TRIGGER BUTTON -->\n    <button\n      type=\"button\"\n      class=\"mc-select mc-dropdown__trigger\"\n      class:is-open={openState}\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n      class:mc-select--s={size === 's'}\n      {disabled}\n      on:click={() => (openState = !openState)}\n    >\n      {buttonvalue ? buttonvalue : placeholder}\n      {#if !multiple && buttonvalue && clearfield}\n        <button\n          class=\"mc-dropdown__clear\"\n          type=\"button\"\n          on:click|stopPropagation={() => {\n            clearListbox();\n          }}\n        >\n          <navigation-control-tag--cross-24px />\n        </button>\n      {/if}\n    </button>\n\n    <div class=\"mc-dropdown__tools\">\n      <!-- LOADER -->\n      {#if loading}\n        <Loader size=\"s\" theme=\"primary\" text=\"\" class=\"mc-dropdown__loader\" />\n      {/if}\n    </div>\n  </div>\n\n  <!-- LISTBOX -->\n  <Listbox\n    items={JSON.stringify(localItems)}\n    open={openState}\n    {multiple}\n    {isfiltered}\n    {emptysearchlabel}\n    {maxwidth}\n    {datatextexpr}\n    {datavalueexpr}\n    {selectall}\n    {labelselectall}\n    bind:value={listboxValue}\n    on:change={onChange}\n    on:scrollend={onScrollEnd}\n    on:select-all={onSelectAll}\n  />\n\n  {#if multiple && alltags}\n    <div class=\"tags-selected\">\n      {#each selectedItems as selectedItem, index}\n        {#if index < maxnumbertoshowtags}\n          <div class=\"tag-selected\">\n            <m-tag\n              id={selectedItem.id}\n              label={selectedItem.label}\n              size=\"s\"\n              type=\"removable\"\n              on:tag-removed={() => removeTagSelected(selectedItem.id)}\n            />\n          </div>\n        {/if}\n      {/each}\n      {#if listboxValue.length > maxnumbertoshowtags}\n        <div class=\"tag-selected\">\n          <m-tag\n            id=\"id-tag\"\n            label=\"({listboxValue.length}) {showmoretagslabel} \"\n            size=\"s\"\n            type=\"link\"\n            on:tag-selected={() => openLayerFn()}\n          />\n        </div>\n      {/if}\n    </div>\n  {/if}\n\n  <span class=\"mc-dropdown__tag\" style=\"display:none;\" />\n  <span class=\"mc-dropdown__loader\" style=\"display:none;\" />\n  <span class=\"mc-text-input mc-dropdown__trigger\" style=\"display:none;\" />\n  {#if multiple && alltags}\n    <div>\n      <m-layer\n        title={layertitle}\n        layertitletag=\"h3\"\n        isopen={openLayer}\n        on:layer-closed={() => closeLayerFn()}\n      >\n        <small slot=\"content\">\n          <div class=\"tags-selected\">\n            {#each selectedItems as selectedItem}\n              <div class=\"tag-selected\">\n                <m-tag\n                  id={selectedItem.id}\n                  label={selectedItem.label}\n                  size=\"s\"\n                  type=\"removable\"\n                  on:tag-removed={() => removeTagSelected(selectedItem.id)}\n                />\n              </div>\n            {/each}\n          </div>\n        </small>\n      </m-layer>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.select';\n  @import '@mozaic-ds/styles/components/c.dropdown';\n\n  // Dropdown\n  // NOTE: These styles with the \"!important\" allow to overload the edge effects\n  // due to the scoping applied by Svelte on the CSS selectors\n  .mc-dropdown {\n    &__tag {\n      position: absolute !important; // due to the Svelte CSS scope\n    }\n\n    &--multi {\n      .mc-dropdown__trigger {\n        padding-left: calc($mu075 + var(--dropdown-tag-width)) !important;\n      }\n    }\n  }\n\n  // Selected Tags\n  .tags-selected {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .tag-selected {\n    margin-top: 1em;\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuLY,GAAK,CAAA,CAAA,CAAA;cAAG,GAAK,CAAA,CAAA,CAAA;gCAAsB,GAAI,CAAA,EAAA,CAAA,CAAA,CAAA;;yBAEpC,GAAW,CAAA,EAAA,CAAA,EAAA;;;QAGZ,KAAK;YACD,KAAK;;;YAGL,KAAK;;;;;;2CAGC,GAAY,CAAA,EAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;4DAZxB,GAAK,CAAA,CAAA,CAAA;eAAG,GAAK,CAAA,CAAA,CAAA;iCAAsB,GAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;mFAEpC,GAAW,CAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,MAQQ,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAgCH,GAAa,CAAA,EAAA,CAAA,CAAA;;;kCAAlB,MAAI,EAAA,CAAA,IAAA,CAAA,EAAA;;;;iCAaD,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,2BAAG,GAAmB,CAAA,EAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;GAdhD,MAyBK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;qCAxBI,GAAa,CAAA,EAAA,CAAA,CAAA;;;iCAAlB,MAAI,EAAA,CAAA,IAAA,CAAA,EAAA;;;;;;;;;;;;;;;;sCAAJ,MAAI,CAAA;;;wBAaD,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,2BAAG,GAAmB,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AATlC,GAAA,uBAAA,CAAA,KAAA,EAAA,IAAA,EAAA,cAAA,oBAAA,GAAY,KAAC,EAAE,CAAA,CAAA;AACZ,GAAA,uBAAA,CAAA,KAAA,EAAA,OAAA,EAAA,iBAAA,oBAAA,GAAY,KAAC,KAAK,CAAA,CAAA;;;;;;GAH7B,MAQK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAPH,MAMC,CAAA,GAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;;;AALK,GAAA,IAAA,KAAA,CAAA,CAAA,CAAA,qBAAA,QAAA,IAAA,cAAA,MAAA,cAAA,oBAAA,GAAY,KAAC,EAAE,CAAA,EAAA;;;;AACZ,GAAA,IAAA,KAAA,CAAA,CAAA,CAAA,qBAAA,QAAA,IAAA,iBAAA,MAAA,iBAAA,oBAAA,GAAY,KAAC,KAAK,CAAA,EAAA;;;;;;;;;;;;;;;AAJ1B,CAAA,IAAA,QAAA,aAAA,GAAK,+BAAG,GAAmB,CAAA,EAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;AAA3B,GAAA,cAAA,GAAK,+BAAG,GAAmB,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sFAgBnB,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,GAAA,IAAA,yBAAI,GAAiB,CAAA,EAAA,CAAA,GAAA,GAAA,CAAA,CAAA;;;;;;GAHrD,MAQK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAPH,MAMC,CAAA,GAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;kIAJU,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,GAAA,IAAA,yBAAI,GAAiB,CAAA,EAAA,CAAA,GAAA,GAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;oCAuB1C,GAAa,CAAA,EAAA,CAAA,CAAA;;;gCAAlB,MAAI,EAAA,CAAA,IAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;4DAPH,GAAU,CAAA,EAAA,CAAA,CAAA,CAAA;;4DAET,GAAS,CAAA,EAAA,CAAA,CAAA,CAAA;;;GAJrB,MAuBK,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;GAtBH,MAqBS,CAAA,IAAA,EAAA,OAAA,CAAA,CAAA;GAfP,MAcO,CAAA,OAAA,EAAA,KAAA,CAAA,CAAA;GAbL,MAYK,CAAA,KAAA,EAAA,IAAA,CAAA,CAAA;;;;;;;;;;;;;;;mCAXI,GAAa,CAAA,EAAA,CAAA,CAAA;;;+BAAlB,MAAI,EAAA,CAAA,IAAA,CAAA,EAAA;;;;;;;;;;;;;;;;oCAAJ,MAAI,CAAA;;;;6DAPH,GAAU,CAAA,EAAA,CAAA,CAAA,CAAA;;;;6DAET,GAAS,CAAA,EAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQH,GAAA,uBAAA,CAAA,KAAA,EAAA,IAAA,EAAA,cAAA,oBAAA,GAAY,KAAC,EAAE,CAAA,CAAA;AACZ,GAAA,uBAAA,CAAA,KAAA,EAAA,OAAA,EAAA,iBAAA,oBAAA,GAAY,KAAC,KAAK,CAAA,CAAA;;;;;;GAH7B,MAQK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAPH,MAMC,CAAA,GAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;;;;AALK,GAAA,IAAA,KAAA,CAAA,CAAA,CAAA,qBAAA,QAAA,IAAA,cAAA,MAAA,cAAA,oBAAA,GAAY,KAAC,EAAE,CAAA,EAAA;;;;AACZ,GAAA,IAAA,KAAA,CAAA,CAAA,CAAA,qBAAA,QAAA,IAAA,iBAAA,MAAA,iBAAA,oBAAA,GAAY,KAAC,KAAK,CAAA,EAAA;;;;;;;;;;;;;;;;;;iCAtFpC,GAAW,CAAA,EAAA,CAAA;mBAAG,GAAW,CAAA,EAAA,CAAA;mBAAG,GAAW,CAAA,CAAA,CAAA,IAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AA7BrC,CAAA,IAAA,SAAA,gBAAA,GAAQ,wBAAI,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,GAAG,CAAC,iBAAK,GAAO,CAAA,EAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;+BA8B5C,GAAQ,CAAA,CAAA,CAAA,oBAAI,GAAW,CAAA,EAAA,CAAA,mBAAI,GAAU,CAAA,EAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;6BAetC,GAAO,CAAA,CAAA,CAAA,IAAA,iBAAA,CAAA,CAAA,CAAA;;;;;;;SAQP,IAAI,CAAC,SAAS,gBAAC,GAAU,CAAA,EAAA,CAAA,CAAA;sBAC1B,GAAS,CAAA,EAAA,CAAA;;;;;;;;;;;sBASH,GAAY,CAAA,EAAA,CAAA,KAAA,KAAA,CAAA,EAAA;yCAAZ,GAAY,CAAA,EAAA,CAAA,CAAA;;;;;oCACb,GAAQ,CAAA,EAAA,CAAA,CAAA,CAAA;0CACL,GAAW,CAAA,EAAA,CAAA,CAAA,CAAA;2CACV,GAAW,CAAA,EAAA,CAAA,CAAA,CAAA;AAGvB,CAAA,IAAA,SAAA,gBAAA,GAAQ,mBAAI,GAAO,CAAA,EAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;AAgCnB,CAAA,IAAA,SAAA,gBAAA,GAAQ,mBAAI,GAAO,CAAA,EAAA,CAAA,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;;;;;AA5GM,GAAA,KAAA,EAAA,gBAAA,GAAA,wBAAA,gBAAA,GAAQ,6CAAsB,GAAQ,CAAA,CAAA,CAAA,GAAA,GAAA;;iBAGhE,GAAU,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0BK,GAAS,CAAA,EAAA,CAAA,CAAA,CAAA;gDACR,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;oDACL,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AACP,GAAA,YAAA,CAAA,MAAA,EAAA,cAAA,WAAA,GAAI,QAAK,GAAG,CAAA,CAAA;;;;;;;;;;yDAjCV,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAFpC,MAyIK,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;GAjIH,MAmDK,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;;;GA9BH,MAsBQ,CAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;GAER,MAKK,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;;;;;;;GAkDP,MAAsD,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;;GACtD,MAAyD,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;;GACzD,MAAwE,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;;;;;;;;;+CAzG3D,GAAY,CAAA,EAAA,CAAA,CAAA;;;;;;;AAKlB,GAAA,iBAAA,GAAQ,wBAAI,GAAY,CAAA,EAAA,CAAA,CAAC,MAAM,GAAG,CAAC,iBAAK,GAAO,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;mHA6BjD,GAAW,CAAA,EAAA,CAAA;qBAAG,GAAW,CAAA,EAAA,CAAA;qBAAG,GAAW,CAAA,CAAA,CAAA,IAAA,EAAA,CAAA,EAAA,QAAA,CAAA,EAAA,EAAA,QAAA,CAAA,CAAA;;qBAClC,GAAQ,CAAA,CAAA,CAAA,oBAAI,GAAW,CAAA,EAAA,CAAA,mBAAI,GAAU,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;kDAR5B,GAAS,CAAA,EAAA,CAAA,CAAA,CAAA;;;;iDACR,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;;qDACL,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA;;;;AACP,IAAA,YAAA,CAAA,MAAA,EAAA,cAAA,WAAA,GAAI,QAAK,GAAG,CAAA,CAAA;;;mBAoB3B,GAAO,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;oEAQP,IAAI,CAAC,SAAS,gBAAC,GAAU,CAAA,EAAA,CAAA,CAAA,CAAA;8EAC1B,GAAS,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;6CASH,GAAY,CAAA,EAAA,CAAA,CAAA;;;;;;AAMrB,GAAA,iBAAA,GAAQ,mBAAI,GAAO,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;AAgCnB,GAAA,iBAAA,GAAQ,mBAAI,GAAO,CAAA,EAAA,CAAA,EAAA;;;;;;;;;;;;;;;AA5GM,IAAA,CAAA,CAAA,OAAA,IAAA,KAAA,CAAA,CAAA,CAAA,0BAAA,OAAA,IAAA,gBAAA,MAAA,gBAAA,GAAA,wBAAA,gBAAA,GAAQ,6CAAsB,GAAQ,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,KAAA,EAAA,gBAAA,EAAA;wDAGhE,GAAU,CAAA,EAAA,CAAA;;;yDAJY,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9H9B,IAAA,UAAU,GAAG,KAAK,CAAA;;;;;;;;;;;;;;;AAjCX,CAAA,IAAA,EAAA,QAAQ,GAAG,MAAM,EAAA,GAAA,OAAA,CAAA;OACjB,KAAa,EAAA,GAAA,OAAA,CAAA;AACb,CAAA,IAAA,EAAA,QAAQ,GAAG,EAAE,EAAA,GAAA,OAAA,CAAA;AACb,CAAA,IAAA,EAAA,WAAW,GAAG,mBAAmB,EAAA,GAAA,OAAA,CAAA;AACjC,CAAA,IAAA,EAAA,QAAQ,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,IAAI,GAAe,GAAG,EAAA,GAAA,OAAA,CAAA;OACtB,OAAgB,EAAA,GAAA,OAAA,CAAA;OAChB,SAAkB,EAAA,GAAA,OAAA,CAAA;AAClB,CAAA,IAAA,EAAA,OAAO,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;OACf,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,KAAU,EAAA,GAAA,OAAA,CAAA;AACV,CAAA,IAAA,EAAA,IAAI,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AACZ,CAAA,IAAA,EAAA,QAAQ,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,gBAAgB,GAAG,kBAAkB,EAAA,GAAA,OAAA,CAAA;AACrC,CAAA,IAAA,EAAA,YAAY,GAAG,OAAO,EAAA,GAAA,OAAA,CAAA;AACtB,CAAA,IAAA,EAAA,aAAa,GAAG,OAAO,EAAA,GAAA,OAAA,CAAA;AACvB,CAAA,IAAA,EAAA,MAAM,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AACd,CAAA,IAAA,EAAA,UAAU,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAClB,CAAA,IAAA,EAAA,UAAU,GAAG,aAAa,EAAA,GAAA,OAAA,CAAA;AAC1B,CAAA,IAAA,EAAA,iBAAiB,GAAG,WAAW,EAAA,GAAA,OAAA,CAAA;AAC/B,CAAA,IAAA,EAAA,mBAAmB,GAAG,EAAE,EAAA,GAAA,OAAA,CAAA;AACxB,CAAA,IAAA,EAAA,OAAO,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AACf,CAAA,IAAA,EAAA,SAAS,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AACjB,CAAA,IAAA,EAAA,cAAc,GAAG,YAAY,EAAA,GAAA,OAAA,CAAA;AAElC,CAAA,MAAA,SAAS,GAAQ,qBAAqB,EAAA,CAAA;OACtC,IAAI,GAAG,IAAI,CAAC,MAAM,EAAA,CAAA;AACpB,CAAA,IAAA,YAAY,OAAO,YAAY,EAAA,CAAA;KAC/B,GAAQ,CAAA;AACR,CAAA,IAAA,QAAQ,GAAG,KAAK,CAAA;KAChB,QAAa,CAAA;KACb,WAAmB,CAAA;KACnB,eAAoB,CAAA;KAEpB,aAAa,GAAA,EAAA,CAAA;AACb,CAAA,IAAA,SAAS,GAAQ,IAAI,CAAA;;UAiBhB,YAAY,GAAA;mBACnB,YAAY,GAAG,QAAQ,GAAA,EAAA,GAAQ,EAAE,CAAA,CAAA;EACjC,YAAY,EAAA,CAAA;AACZ,EAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAA,CAAA;;;AAG5B,CAAA,SAAA,iBAAiB,CAAC,cAAmB,EAAA;mBAC5C,YAAY,GAAG,YAAY,CAAC,MAAM,CAC/B,KAAU,IAAK,KAAK,KAAK,cAAc,CAAA,CAAA,CAAA;AAE1C,EAAA,YAAY,CAAC,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAA,CAAA;;;UAGvC,WAAW,GAAA;AAClB,EAAA,YAAA,CAAA,EAAA,EAAA,SAAS,GAAG,IAAI,CAAA,CAAA;;;UAGT,YAAY,GAAA;AACnB,EAAA,YAAA,CAAA,EAAA,EAAA,SAAS,GAAG,IAAI,CAAA,CAAA;;;UAGT,YAAY,GAAA;AACnB,EAAA,YAAA,CAAA,EAAA,EAAA,SAAS,GAAG,KAAK,CAAA,CAAA;;AAEb,EAAA,IAAA,QAAQ,KAAK,MAAM,EAAA;GACrB,SAAS,EAAA,CAAA;;AAET,GAAA,YAAA,CAAA,EAAA,EAAA,UAAU,GAAG,WAAW,CAAA,CAAA;;;;UAInB,QAAQ,GAAA;AACf,EAAA,YAAY,CAAC,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAA,CAAA;;OAEzC,QAAQ,EAAA;GACX,YAAY,EAAA,CAAA;;;;AAIP,CAAA,SAAA,gBAAgB,CAAC,GAAS,EAAA;AAC3B,EAAA,MAAA,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,YAAY,CAAA;;AAEhC,EAAA,MAAA,aAAa,GAAG,WAAW,CAAC,MAAM,CAAE,IAAkB,IAAA;UACnD,QAAA;AACH,KAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAA,CAAA;KACjC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAA,CAAA;;;SAG3B,aAAa,CAAA;;;UAGb,SAAS,GAAA;AAChB,EAAA,eAAe,GAAG,WAAW,CAAA;AACvB,EAAA,MAAA,aAAa,GAAG,gBAAgB,EAAA,CAAA;;AAEtC,EAAA,eAAe,CAAC,IAAI,CAAE,CAAA,CAAM,EAAE,CAAM,KAAA;AAC5B,GAAA,MAAA,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAA,CAAA;AACnC,GAAA,MAAA,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAA,CAAA;;AAErC,GAAA,IAAA,QAAQ,KAAK,QAAQ,EAAA;AAChB,IAAA,OAAA,CAAC,CAAC,aAAa,CAAI,GAAA,CAAC,CAAC,aAAa,CAAA,CAAA;AAChC,IAAA,MAAA,IAAA,QAAQ,GAAG,QAAQ,EAAA;WACrB,CAAC,CAAA;;YAEA,CAAC,CAAA;;;;AAIb,EAAA,YAAA,CAAA,EAAA,EAAA,UAAU,GAAG,eAAe,CAAA,CAAA;;;UAGrB,WAAW,GAAA;AAClB,EAAA,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA,CAAA;;;AAGhC,CAAA,SAAA,WAAW,CAAC,CAAc,EAAA;AACjC,EAAA,YAAY,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAA,CAAA;;;AAI/B,CAAA,eAAA,iBAAiB,CAAC,KAAU,EAAA;QACnC,IAAI,EAAA,CAAA;mBACV,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAA,CAAA,CAAA;QAChC,aAAa,GAAG,aAAa,CAAC,GAAG,CAAE,IAAI,IAAK,IAAI,CAAC,YAAY,CAAA,CAAA,CAAA;AAEnE,EAAA,YAAA,CAAA,EAAA,EAAA,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,CAAA;;MAEjC,QAAQ,EAAA;AACV,GAAA,YAAA,CAAA,EAAA,EAAA,QAAQ,GAAG,KAAK,CAAA,CAAA;;;;AAIL,CAAA,eAAA,WAAW,CAAC,QAAa,EAAA;QAChC,IAAI,EAAA,CAAA;;AAEV,EAAA,YAAA,CAAA,EAAA,EAAA,QAAQ,GACN,GAAG,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAA;OAEtB,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAA,CACnD,WAAW,GAAG,CACnB,CAAA,EAAA,CAAA;IACA,KAAK,CAAA,CAAA;;;;;GA2BI,GAAG,GAAA,OAAA,CAAA;;;;;;EAsBV,YAAY,EAAA,CAAA;;;AARD,CAAA,MAAA,eAAA,GAAA,MAAA,YAAA,CAAA,EAAA,EAAA,SAAS,IAAI,SAAS,CAAA,CAAA;;;EAoC7B,YAAY,GAAA,OAAA,CAAA;;;;6CAgBQ,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAA,CAAA;oCAYlC,WAAW,EAAA,CAAA;+CA2BN,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAA,CAAA;oCAX1C,YAAY,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA7OxC,YAAA,CAAA,EAAA,EAAE,WAAW,GAAG,KAAK,GAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,GAAA,EAAA,CAAA,CAAA;;;;GACzC,YAAA,CAAA,EAAA,EAAE,UAAU,GAAG,WAAW,CAAA,CAAA;;;;AAC3B,GAAG,YAAA,CAAA,EAAA,EAAA,YAAY,GAAI,CAAA,KAAK,IAAI,QAAQ;;AAAQ,KAAA,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAA,CAAA;;;;AAC7E,oBAAG,WAAW,GAAA,MAAA;AACL,IAAA,OAAA,YAAY,CAAC,MAAM,CAAC,QAAQ,EAAK,GAAA,GAAG,GAAG,QAAQ,CAAA;;;;;GAErD,iBAAiB,CAAC,YAAY,CAAA,CAAA;;;;GAC9B,WAAW,CAAC,QAAQ,CAAA,CAAA;;;;GACtB,YAAA,CAAA,EAAA,EAAE,SAAS,GAAG,IAAI,CAAA,CAAA;;;;GAClB;AACO,IAAA,MAAA,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAC9C,IAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA,CAAA;;;;AAE5C,mBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/field/Field.js

@@ -1,2 +1,376 @@
-import{S as e,i as t,a as i,b as r,f as s,s as l,c as n,e as d,t as a,d as m,n as o,g as c,h,j as p,k as u,m as g,o as f,p as $,q as x}from"../../index-c33b3772.js";function _(e){let t,i;return{c(){t=d("span"),i=a(e[2]),c(t,"class","mc-field__requirement"),c(t,"aria-hidden","true")},m(e,s){r(e,t,s),p(t,i)},p(e,t){4&t&&u(i,e[2])},d(e){e&&f(t)}}}function b(e){let t,i;return{c(){t=d("span"),i=a(e[4]),c(t,"id",e[3]),c(t,"class","mc-field__help")},m(e,s){r(e,t,s),p(t,i)},p(e,r){16&r&&u(i,e[4]),8&r&&c(t,"id",e[3])},d(e){e&&f(t)}}}function q(e){let t,i;return{c(){t=d("span"),i=a(e[6]),c(t,"id",e[5]),c(t,"class","mc-field__error-message")},m(e,s){r(e,t,s),p(t,i)},p(e,r){64&r&&u(i,e[6]),32&r&&c(t,"id",e[5])},d(e){e&&f(t)}}}function v(e){let t,i,s,l,$,x,v,w,y=e[2]&&_(e),k=e[3]&&e[4]&&b(e),j=e[7]&&q(e),z=[{class:"mc-field"},e[8]],C={};for(let e=0;e<z.length;e+=1)C=n(C,z[e]);return{c(){t=d("div"),i=d("label"),s=a(e[1]),l=m(),y&&y.c(),$=m(),k&&k.c(),x=m(),v=d("slot"),w=m(),j&&j.c(),this.c=o,c(i,"for",e[0]),c(i,"class","mc-field__label"),h(t,C)},m(e,n){r(e,t,n),p(t,i),p(i,s),p(i,l),y&&y.m(i,null),p(t,$),k&&k.m(t,null),p(t,x),p(t,v),p(t,w),j&&j.m(t,null)},p(e,[r]){2&r&&u(s,e[1]),e[2]?y?y.p(e,r):(y=_(e),y.c(),y.m(i,null)):y&&(y.d(1),y=null),1&r&&c(i,"for",e[0]),e[3]&&e[4]?k?k.p(e,r):(k=b(e),k.c(),k.m(t,x)):k&&(k.d(1),k=null),e[7]?j?j.p(e,r):(j=q(e),j.c(),j.m(t,null)):j&&(j.d(1),j=null),h(t,C=g(z,[{class:"mc-field"},256&r&&e[8]]))},i:o,o:o,d(e){e&&f(t),y&&y.d(),k&&k.d(),j&&j.d()}}}function w(e,t,i){let r;const s=["id","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid"];let l=$(t,s),{id:d}=t,{label:a}=t,{requirementtext:m}=t,{helpid:o}=t,{helptext:c}=t,{errorid:h}=t,{errormessage:p}=t,{isinvalid:u=!1}=t;return e.$$set=e=>{t=n(n({},t),x(e)),i(9,l=$(t,s)),"id"in e&&i(0,d=e.id),"label"in e&&i(1,a=e.label),"requirementtext"in e&&i(2,m=e.requirementtext),"helpid"in e&&i(3,o=e.helpid),"helptext"in e&&i(4,c=e.helptext),"errorid"in e&&i(5,h=e.errorid),"errormessage"in e&&i(6,p=e.errormessage),"isinvalid"in e&&i(7,u=e.isinvalid)},e.$$.update=()=>{i(8,r=Object.assign({},l)),256&e.$$.dirty&&delete r.class},[d,a,m,o,c,h,p,u,r]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='@charset "UTF-8";.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){}@media screen and (min-width: 1024px){}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}',this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},w,v,l,{id:0,label:1,requirementtext:2,helpid:3,helptext:4,errorid:5,errormessage:6,isinvalid:7},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["id","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),s()}get label(){return this.$$.ctx[1]}set label(e){this.$$set({label:e}),s()}get requirementtext(){return this.$$.ctx[2]}set requirementtext(e){this.$$set({requirementtext:e}),s()}get helpid(){return this.$$.ctx[3]}set helpid(e){this.$$set({helpid:e}),s()}get helptext(){return this.$$.ctx[4]}set helptext(e){this.$$set({helptext:e}),s()}get errorid(){return this.$$.ctx[5]}set errorid(e){this.$$set({errorid:e}),s()}get errormessage(){return this.$$.ctx[6]}set errormessage(e){this.$$set({errormessage:e}),s()}get isinvalid(){return this.$$.ctx[7]}set isinvalid(e){this.$$set({isinvalid:e}),s()}}export{y as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, t as text, d as space, n as noop, g as attr, h as set_attributes, j as append, k as set_data, m as get_spread_update, o as detach, p as compute_rest_props, q as exclude_internal_props } from '../../index-c33b3772.js';
+
+/* src/components/field/Field.svelte generated by Svelte v3.58.0 */
+
+function create_if_block_2(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*requirementtext*/ ctx[2]);
+			attr(span, "class", "mc-field__requirement");
+			attr(span, "aria-hidden", "true");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*requirementtext*/ 4) set_data(t, /*requirementtext*/ ctx[2]);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (24:2) {#if helpid && helptext}
+function create_if_block_1(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*helptext*/ ctx[4]);
+			attr(span, "id", /*helpid*/ ctx[3]);
+			attr(span, "class", "mc-field__help");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*helptext*/ 16) set_data(t, /*helptext*/ ctx[4]);
+
+			if (dirty & /*helpid*/ 8) {
+				attr(span, "id", /*helpid*/ ctx[3]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+// (30:2) {#if isinvalid}
+function create_if_block(ctx) {
+	let span;
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(/*errormessage*/ ctx[6]);
+			attr(span, "id", /*errorid*/ ctx[5]);
+			attr(span, "class", "mc-field__error-message");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*errormessage*/ 64) set_data(t, /*errormessage*/ ctx[6]);
+
+			if (dirty & /*errorid*/ 32) {
+				attr(span, "id", /*errorid*/ ctx[5]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let label_1;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let slot;
+	let t4;
+	let if_block0 = /*requirementtext*/ ctx[2] && create_if_block_2(ctx);
+	let if_block1 = /*helpid*/ ctx[3] && /*helptext*/ ctx[4] && create_if_block_1(ctx);
+	let if_block2 = /*isinvalid*/ ctx[7] && create_if_block(ctx);
+	let div_levels = [{ class: "mc-field" }, /*attributes*/ ctx[8]];
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			label_1 = element("label");
+			t0 = text(/*label*/ ctx[1]);
+			t1 = space();
+			if (if_block0) if_block0.c();
+			t2 = space();
+			if (if_block1) if_block1.c();
+			t3 = space();
+			slot = element("slot");
+			t4 = space();
+			if (if_block2) if_block2.c();
+			this.c = noop;
+			attr(label_1, "for", /*id*/ ctx[0]);
+			attr(label_1, "class", "mc-field__label");
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, label_1);
+			append(label_1, t0);
+			append(label_1, t1);
+			if (if_block0) if_block0.m(label_1, null);
+			append(div, t2);
+			if (if_block1) if_block1.m(div, null);
+			append(div, t3);
+			append(div, slot);
+			append(div, t4);
+			if (if_block2) if_block2.m(div, null);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*label*/ 2) set_data(t0, /*label*/ ctx[1]);
+
+			if (/*requirementtext*/ ctx[2]) {
+				if (if_block0) {
+					if_block0.p(ctx, dirty);
+				} else {
+					if_block0 = create_if_block_2(ctx);
+					if_block0.c();
+					if_block0.m(label_1, null);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (dirty & /*id*/ 1) {
+				attr(label_1, "for", /*id*/ ctx[0]);
+			}
+
+			if (/*helpid*/ ctx[3] && /*helptext*/ ctx[4]) {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_1(ctx);
+					if_block1.c();
+					if_block1.m(div, t3);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (/*isinvalid*/ ctx[7]) {
+				if (if_block2) {
+					if_block2.p(ctx, dirty);
+				} else {
+					if_block2 = create_if_block(ctx);
+					if_block2.c();
+					if_block2.m(div, null);
+				}
+			} else if (if_block2) {
+				if_block2.d(1);
+				if_block2 = null;
+			}
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [{ class: "mc-field" }, dirty & /*attributes*/ 256 && /*attributes*/ ctx[8]]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			if (if_block2) if_block2.d();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let attributes;
+
+	const omit_props_names = [
+		"id","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid"
+	];
+
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { id } = $$props;
+	let { label } = $$props;
+	let { requirementtext } = $$props;
+	let { helpid } = $$props;
+	let { helptext } = $$props;
+	let { errorid } = $$props;
+	let { errormessage } = $$props;
+	let { isinvalid = false } = $$props;
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(9, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('id' in $$new_props) $$invalidate(0, id = $$new_props.id);
+		if ('label' in $$new_props) $$invalidate(1, label = $$new_props.label);
+		if ('requirementtext' in $$new_props) $$invalidate(2, requirementtext = $$new_props.requirementtext);
+		if ('helpid' in $$new_props) $$invalidate(3, helpid = $$new_props.helpid);
+		if ('helptext' in $$new_props) $$invalidate(4, helptext = $$new_props.helptext);
+		if ('errorid' in $$new_props) $$invalidate(5, errorid = $$new_props.errorid);
+		if ('errormessage' in $$new_props) $$invalidate(6, errormessage = $$new_props.errormessage);
+		if ('isinvalid' in $$new_props) $$invalidate(7, isinvalid = $$new_props.isinvalid);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(8, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 256) {
+			delete attributes.class;
+		}
+	};
+
+	return [
+		id,
+		label,
+		requirementtext,
+		helpid,
+		helptext,
+		errorid,
+		errormessage,
+		isinvalid,
+		attributes
+	];
+}
+
+class Field extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `@charset "UTF-8";.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:" - "}.mc-field__help{display:block;margin-top:0.125rem}@media screen and (min-width: 769px){.mc-field__container--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){}@media screen and (min-width: 1024px){}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 0,
+				label: 1,
+				requirementtext: 2,
+				helpid: 3,
+				helptext: 4,
+				errorid: 5,
+				errormessage: 6,
+				isinvalid: 7
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"id",
+			"label",
+			"requirementtext",
+			"helpid",
+			"helptext",
+			"errorid",
+			"errormessage",
+			"isinvalid"
+		];
+	}
+
+	get id() {
+		return this.$$.ctx[0];
+	}
+
+	set id(id) {
+		this.$$set({ id });
+		flush();
+	}
+
+	get label() {
+		return this.$$.ctx[1];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get requirementtext() {
+		return this.$$.ctx[2];
+	}
+
+	set requirementtext(requirementtext) {
+		this.$$set({ requirementtext });
+		flush();
+	}
+
+	get helpid() {
+		return this.$$.ctx[3];
+	}
+
+	set helpid(helpid) {
+		this.$$set({ helpid });
+		flush();
+	}
+
+	get helptext() {
+		return this.$$.ctx[4];
+	}
+
+	set helptext(helptext) {
+		this.$$set({ helptext });
+		flush();
+	}
+
+	get errorid() {
+		return this.$$.ctx[5];
+	}
+
+	set errorid(errorid) {
+		this.$$set({ errorid });
+		flush();
+	}
+
+	get errormessage() {
+		return this.$$.ctx[6];
+	}
+
+	set errormessage(errormessage) {
+		this.$$set({ errormessage });
+		flush();
+	}
+
+	get isinvalid() {
+		return this.$$.ctx[7];
+	}
+
+	set isinvalid(isinvalid) {
+		this.$$set({ isinvalid });
+		flush();
+	}
+}
+
+export { Field as default };
 //# sourceMappingURL=Field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let id: string;\n  export let label: string;\n  export let requirementtext: string;\n  export let helpid: string;\n  export let helptext: string;\n  export let errorid: string;\n  export let errormessage: string;\n  export let isinvalid = false;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n</script>\n\n<div class=\"mc-field\" {...attributes}>\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  <slot />\n  {#if isinvalid}\n    <span id={errorid} class=\"mc-field__error-message\">\n      {errormessage}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block_2","if_block1","create_if_block_1","create_if_block","div","append","label_1","slot","id","$$props","label","requirementtext","helpid","helptext","errorid","errormessage","isinvalid","attributes","Object","assign","$$restProps","class"],"mappings":"sNAoBSA,EAAe,2EADlBC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAe,qEAMjBA,EAAQ,aADDA,EAAM,0CAAhBC,EAEMC,EAAAC,EAAAC,4BADHJ,EAAQ,kBADDA,EAAM,qEAObA,EAAY,aADLA,EAAO,mDAAjBC,EAEMC,EAAAC,EAAAC,4BADHJ,EAAY,mBADLA,EAAO,wDAbZA,EAAe,IAAAK,EAAAL,GAMjBM,EAAAN,MAAUA,EAAQ,IAAAO,EAAAP,KAMlBA,EAAS,IAAAQ,EAAAR,yBAfUA,EAAU,wFAE/BA,EAAK,sFADIA,EAAE,kDADhBC,EAoBKC,EAAAO,EAAAL,GAnBHM,EAOOD,EAAAE,6DAMPD,EAAOD,EAAAG,4CAZJZ,EAAK,IACDA,EAAe,2EAFVA,EAAE,IAQTA,MAAUA,EAAQ,yDAMlBA,EAAS,iGAfUA,EAAU,oMAZvBa,GAAUC,SACVC,GAAaD,mBACbE,GAAuBF,UACvBG,GAAcH,YACdI,GAAgBJ,WAChBK,GAAeL,gBACfM,GAAoBN,GACpBO,UAAAA,GAAY,GAAKP,2VACzBQ,EAALC,OAAAC,UAAuBC,2BACXH,EAAWI"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let id: string;\n  export let label: string;\n  export let requirementtext: string;\n  export let helpid: string;\n  export let helptext: string;\n  export let errorid: string;\n  export let errormessage: string;\n  export let isinvalid = false;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n</script>\n\n<div class=\"mc-field\" {...attributes}>\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  <slot />\n  {#if isinvalid}\n    <span id={errorid} class=\"mc-field__error-message\">\n      {errormessage}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;gCAoBS,GAAe,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;GADlB,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;sEADH,GAAe,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;yBAMjB,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;+BADD,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAAhB,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;yDADH,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;;;gCADD,GAAM,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;6BAOb,GAAY,CAAA,CAAA,CAAA,CAAA,CAAA;gCADL,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAAjB,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;iEADH,GAAY,CAAA,CAAA,CAAA,CAAA,CAAA;;;iCADL,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;qCAbZ,GAAe,CAAA,CAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;AAMjB,CAAA,IAAA,SAAA,cAAA,GAAM,oBAAI,GAAQ,CAAA,CAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;+BAMlB,GAAS,CAAA,CAAA,CAAA,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;yDAfU,GAAU,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;uBAE/B,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;+BADI,GAAE,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;GADhB,MAoBK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;GAnBH,MAOO,CAAA,GAAA,EAAA,OAAA,CAAA,CAAA;;;;;;;GAMP,MAAO,CAAA,GAAA,EAAA,IAAA,CAAA,CAAA;;;;;mDAZJ,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;2BACD,GAAe,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;gCAFV,GAAE,CAAA,CAAA,CAAA,CAAA,CAAA;;;AAQT,GAAA,eAAA,GAAM,oBAAI,GAAQ,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;qBAMlB,GAAS,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;qIAfU,GAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;OAZvB,EAAU,EAAA,GAAA,OAAA,CAAA;OACV,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,eAAuB,EAAA,GAAA,OAAA,CAAA;OACvB,MAAc,EAAA,GAAA,OAAA,CAAA;OACd,QAAgB,EAAA,GAAA,OAAA,CAAA;OAChB,OAAe,EAAA,GAAA,OAAA,CAAA;OACf,YAAoB,EAAA,GAAA,OAAA,CAAA;AACpB,CAAA,IAAA,EAAA,SAAS,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;;;;;;;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}