@mozaic-ds/web-components 0.1.0

package/public/adeo/components/dropdown/Dropdown.svelte

@@ -0,0 +1,332 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { get_current_component } from 'svelte/internal';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import { clickOutside } from '../../utilities/ClickOutside';
+  import type { ListboxItems } from '../listbox/listbox.types';
+  import type { SelectSize } from '../select/select.types';
+
+  import Tag from '../tag/Tag.nested.svelte';
+  import Loader from '../loader/Loader.nested.svelte';
+  import Listbox from '../listbox/Listbox.nested.svelte';
+
+  export let maxwidth = '100%';
+  export let tagid: string;
+  export let taglabel = '';
+  export let placeholder = '-- Placeholder --';
+  export let disabled = false;
+  export let size: SelectSize = 'm';
+  export let isvalid: boolean;
+  export let isinvalid: boolean;
+  export let loading = false;
+  export let items: string;
+  export let value: any;
+  export let open = false;
+  export let multiple = false;
+  export let emptysearchlabel = 'No results found';
+  export let datatextexpr = 'label';
+  export let datavalueexpr = 'value';
+  export let nosort = false;
+  export let clearfield = false;
+  export let layertitle = 'Title layer';
+  export let showmoretagslabel = 'Show more';
+  export let maxnumbertoshowtags = 12;
+  export let alltags = false;
+  export let selectall = false;
+  export let labelselectall = 'Select all';
+
+  const component: any = get_current_component();
+  const uuid = Math.random();
+  let eventHandler = new EventHandler();
+  let tag: any;
+  let tagWidth = '0px';
+  let tagValue: any;
+  let buttonvalue: string;
+  let sortedListItems: any;
+  let isfiltered = false;
+  let selectedItems: ListboxItems[] = [];
+  let openLayer: any = null;
+
+  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];
+  $: localItems = parsedItems;
+  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;
+  $: setTagLabel = () => {
+    return listboxValue.length.toString() + ' ' + taglabel;
+  };
+  $: watchListboxValue(listboxValue);
+  $: setTagWidth(tagValue);
+  $: openState = open;
+  $: {
+    const eventName = openState ? 'open' : 'close';
+    eventHandler.dispatch(eventName, openState);
+  }
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+  function clearListbox() {
+    listboxValue = multiple ? [] : '';
+    closeListBox();
+    eventHandler.dispatch('clear', true);
+  }
+
+  function removeTagSelected(itemSelectedId: any) {
+    listboxValue = listboxValue.filter(
+      (value: any) => value !== itemSelectedId,
+    );
+    eventHandler.dispatch('onchange', listboxValue);
+  }
+
+  function openLayerFn() {
+    openLayer = true;
+  }
+
+  function closeLayerFn() {
+    openLayer = null;
+  }
+
+  function closeListBox() {
+    openState = false;
+
+    if (multiple && !nosort) {
+      sortItems();
+    } else {
+      localItems = parsedItems;
+    }
+  }
+
+  function onChange() {
+    eventHandler.dispatch('onchange', listboxValue);
+
+    if (!multiple) {
+      closeListBox();
+    }
+  }
+
+  function getSelectedItems(val?: any) {
+    const value = val ? val : listboxValue;
+
+    const selectedItems = parsedItems.filter((item: ListboxItems) => {
+      return multiple
+        ? value.includes(item[datavalueexpr])
+        : value === item[datavalueexpr];
+    });
+
+    return selectedItems;
+  }
+
+  function sortItems() {
+    sortedListItems = parsedItems;
+    const selectedItems = getSelectedItems();
+
+    sortedListItems.sort((a: any, b: any) => {
+      const hasItemA = selectedItems.includes(a);
+      const hasItemB = selectedItems.includes(b);
+
+      if (hasItemA === hasItemB) {
+        return a[datavalueexpr] - b[datavalueexpr];
+      } else if (hasItemA < hasItemB) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+
+    localItems = sortedListItems;
+  }
+
+  function onScrollEnd() {
+    eventHandler.dispatch('scrollend', true);
+  }
+
+  // Watch Functions
+  async function watchListboxValue(value: any) {
+    await tick();
+    selectedItems = getSelectedItems(value);
+    const seletedLabels = selectedItems.map((item) => item[datatextexpr]);
+
+    buttonvalue = seletedLabels.join(', ');
+
+    if (multiple) {
+      tagValue = value;
+    }
+  }
+
+  async function setTagWidth(tagValue: any) {
+    await tick();
+
+    tagWidth =
+      tag && tagValue && tagValue.length
+        ? `${
+            component.shadowRoot.querySelector('.mc-tag-removable')
+              .clientWidth + 8
+          }px`
+        : '0px';
+  }
+</script>
+
+<div
+  class="mc-dropdown"
+  class:mc-dropdown--multi={multiple}
+  style="--dropdown-tag-width: {tagWidth}; --dropdown-width: {maxwidth};"
+  use:clickOutside
+  on:outclick={closeListBox}
+  {...attributes}
+>
+  <!--  TAG REMOVABLE -->
+  {#if multiple && listboxValue.length > 0 && !alltags}
+    <Tag
+      id={tagid ? tagid : `autocompleteTag-${uuid}`}
+      class="mc-dropdown__tag"
+      label={setTagLabel()}
+      size="s"
+      type="removable"
+      dark={false}
+      disabled={false}
+      href=""
+      name=""
+      selected={false}
+      bind:this={tag}
+      on:tag-removed={clearListbox}
+    />
+  {/if}
+
+  <!-- LOADER -->
+  {#if loading}
+    <Loader size="s" theme="primary" text="" class="mc-dropdown__loader" />
+  {/if}
+
+  <!-- BUTTON -->
+  <button
+    type="button"
+    class="mc-select mc-dropdown__trigger"
+    class:is-open={openState}
+    class:is-valid={isvalid}
+    class:is-invalid={isinvalid}
+    class:mc-select--s={size === 's'}
+    {disabled}
+    on:click={() => (openState = !openState)}
+  >
+    {buttonvalue ? buttonvalue : placeholder}
+    {#if !multiple && buttonvalue && clearfield}
+      <button
+        class="mc-dropdown__clear"
+        type="button"
+        on:click|stopPropagation={() => {
+          clearListbox();
+        }}
+      >
+        <navigation-control-tag--cross-24px />
+      </button>
+    {/if}
+  </button>
+
+  <!-- LISTBOX -->
+  <Listbox
+    items={JSON.stringify(localItems)}
+    open={openState}
+    {multiple}
+    {isfiltered}
+    {emptysearchlabel}
+    {maxwidth}
+    {datatextexpr}
+    {datavalueexpr}
+    {selectall}
+    {labelselectall}
+    bind:value={listboxValue}
+    on:change={onChange}
+    on:scrollend={onScrollEnd}
+  />
+
+  {#if multiple && alltags}
+    <div class="tags-selected">
+      {#each selectedItems as selectedItem, index}
+        {#if index < maxnumbertoshowtags}
+          <div class="tag-selected">
+            <m-tag
+              id={selectedItem.id}
+              label={selectedItem.label}
+              size="s"
+              type="removable"
+              on:tag-removed={() => removeTagSelected(selectedItem.id)}
+            />
+          </div>
+        {/if}
+      {/each}
+      {#if listboxValue.length > maxnumbertoshowtags}
+        <div class="tag-selected">
+          <m-tag
+            id="id-tag"
+            label="({listboxValue.length}) {showmoretagslabel} "
+            size="s"
+            type="link"
+            on:tag-selected={() => openLayerFn()}
+          />
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <span class="mc-dropdown__tag" style="display:none;" />
+  <span class="mc-dropdown__loader" style="display:none;" />
+  <span class="mc-text-input mc-dropdown__trigger" style="display:none;" />
+  {#if multiple && alltags}
+    <div>
+      <m-layer
+        title={layertitle}
+        layertitletag="h3"
+        isopen={openLayer}
+        on:layer-closed={() => closeLayerFn()}
+      >
+        <small slot="content">
+          <div class="tags-selected">
+            {#each selectedItems as selectedItem}
+              <div class="tag-selected">
+                <m-tag
+                  id={selectedItem.id}
+                  label={selectedItem.label}
+                  size="s"
+                  type="removable"
+                  on:tag-removed={() => removeTagSelected(selectedItem.id)}
+                />
+              </div>
+            {/each}
+          </div>
+        </small>
+      </m-layer>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.select';
+  @import '@mozaic-ds/styles/components/c.dropdown';
+
+  // Dropdown
+  // NOTE: These styles with the "!important" allow to overload the edge effects
+  // due to the scoping applied by Svelte on the CSS selectors
+  .mc-dropdown {
+    &__tag {
+      position: absolute !important; // due to the Svelte CSS scope
+    }
+
+    &--multi {
+      .mc-dropdown__trigger {
+        padding-left: calc($mu075 + var(--dropdown-tag-width)) !important;
+      }
+    }
+  }
+
+  // Selected Tags
+  .tags-selected {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tag-selected {
+    margin-top: 1em;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+</style>

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

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +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"}

package/public/adeo/components/field/Field.svelte

@@ -0,0 +1,41 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let id: string;
+  export let label: string;
+  export let requirementtext: string;
+  export let helpid: string;
+  export let helptext: string;
+  export let errorid: string;
+  export let errormessage: string;
+  export let isinvalid = false;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+</script>
+
+<div class="mc-field" {...attributes}>
+  <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}
+  <slot />
+  {#if isinvalid}
+    <span id={errorid} class="mc-field__error-message">
+      {errormessage}
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.fields';
+</style>

package/public/adeo/components/flag/Flag.js

@@ -0,0 +1,2 @@
+import{S as e,i as r,a as o,b as l,f as a,s as f,c,e as t,t as s,n as d,g as b,h as n,j as i,k as g,m,o as h,p as u,q as _}from"../../index-c33b3772.js";function p(e){let r,o,a,f,u=[{class:f=$(e[2],e[0])+" "+e[4]},e[3]],_={};for(let e=0;e<u.length;e+=1)_=c(_,u[e]);return{c(){r=t("div"),o=t("span"),a=s(e[1]),this.c=d,b(o,"class","mc-flag__label"),n(r,_)},m(e,f){l(e,r,f),i(r,o),i(o,a)},p(e,[o]){2&o&&g(a,e[1]),n(r,_=m(u,[21&o&&f!==(f=$(e[2],e[0])+" "+e[4])&&{class:f},8&o&&e[3]]))},i:d,o:d,d(e){e&&h(r)}}}function $(e,r){const o=["mc-flag"],l=function(e,r){if(!r&&!e)return"";const o=r?"bordered":"solid";return e?`mc-flag--${o}-${e}`:`mc-flag--${o}`}(e,r);return l&&o.push(l),o.join(" ")}function k(e,r,o){let l,a;const f=["bordered","label","theme"];let t=u(r,f),{bordered:s=!1}=r,{label:d}=r,{theme:b}=r;return e.$$set=e=>{o(6,r=c(c({},r),_(e))),o(5,t=u(r,f)),"bordered"in e&&o(0,s=e.bordered),"label"in e&&o(1,d=e.label),"theme"in e&&o(2,b=e.theme)},e.$$.update=()=>{o(4,l=r.class),o(3,a=Object.assign({},t)),8&e.$$.dirty&&delete a.class},r=_(r),[s,d,b,a,l]}class x extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-flag{display:inline-block;font-size:0.875rem;margin:0;vertical-align:middle;line-height:1.786;font-family:"Roboto", sans-serif;font-weight:700}.mc-flag__label{line-height:1.1428571429;border:1px solid transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0.25rem 0.5rem}.mc-flag .mc-flag__label{color:#ffffff;border-color:#007f8c;background-color:#007f8c}.mc-flag--solid-primary-02 .mc-flag__label{color:#ffffff;border-color:#4b4a8c;background-color:#4b4a8c}.mc-flag--solid-dark .mc-flag__label{color:#ffffff;border-color:#000000;background-color:#000000}.mc-flag--solid-light .mc-flag__label{color:#000000;border-color:#ffffff;background-color:#ffffff}.mc-flag--solid-danger .mc-flag__label{color:#ffffff;border-color:#c61112;background-color:#c61112}.mc-flag--bordered .mc-flag__label{color:#007f8c;border-color:#007f8c;background-color:#ffffff}.mc-flag--bordered-primary-02 .mc-flag__label{color:#4b4a8c;border-color:#4b4a8c;background-color:#ffffff}.mc-flag--bordered-dark .mc-flag__label{color:#000000;border-color:#000000;background-color:#ffffff}.mc-flag--bordered-light .mc-flag__label{color:#ffffff;border-color:#ffffff;background-color:#000000}.mc-flag--bordered-danger .mc-flag__label{color:#c61112;border-color:#c61112;background-color:#ffffff}',this.shadowRoot.appendChild(c),r(this,{target:this.shadowRoot,props:o(this.attributes),customElement:!0},k,p,f,{bordered:0,label:1,theme:2},null),e&&(e.target&&l(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["bordered","label","theme"]}get bordered(){return this.$$.ctx[0]}set bordered(e){this.$$set({bordered:e}),a()}get label(){return this.$$.ctx[1]}set label(e){this.$$set({label:e}),a()}get theme(){return this.$$.ctx[2]}set theme(e){this.$$set({theme:e}),a()}}export{x as default};
+//# sourceMappingURL=Flag.js.map

package/public/adeo/components/flag/Flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flag.js","sources":["../../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { FlagTheme } from './flag.types';\n\n  export let bordered = false;\n  export let label: string;\n  export let theme: FlagTheme;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function getAppearanceClass(theme: FlagTheme, isBordered: boolean): string {\n    if (!isBordered && !theme) {\n      return '';\n    }\n\n    const type = isBordered ? 'bordered' : 'solid';\n\n    if (theme) {\n      return `mc-flag--${type}-${theme}`;\n    }\n    return `mc-flag--${type}`;\n  }\n\n  function setClasses(theme: FlagTheme, isBordered: boolean) {\n    const classes = ['mc-flag'];\n\n    const appearanceClass = getAppearanceClass(theme, isBordered);\n    if (appearanceClass) {\n      classes.push(appearanceClass);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{setClasses(theme, bordered)} {userClass}\" {...attributes}>\n  <span class=\"mc-flag__label\">{label}</span>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.flag';\n</style>\n"],"names":["class","div_class_value","setClasses","ctx","insert","target","div","anchor","append","span","dirty","theme","isBordered","classes","appearanceClass","type","getAppearanceClass","push","join","bordered","$$props","label","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"uLAqCaA,MAAAC,EAAAC,EAAWC,EAAO,GAAAA,UAAYA,EAAS,IAAOA,EAAU,uFACrCA,EAAK,0DADrCC,EAEKC,EAAAC,EAAAC,GADHC,EAA0CF,EAAAG,6BAAZN,EAAK,eADxB,GAAAO,GAAAT,KAAAA,EAAAC,EAAWC,EAAO,GAAAA,UAAYA,EAAS,KAAA,CAAAH,MAAAC,QAAOE,EAAU,uCAZ1DD,EAAWS,EAAkBC,GAC9B,MAAAC,GAAW,WAEXC,WAhBoBH,EAAkBC,GACvC,IAAAA,IAAeD,QACX,GAGH,MAAAI,EAAOH,EAAa,WAAa,eAEnCD,EACiB,YAAAI,KAAQJ,gBAEVI,IAMKC,CAAmBL,EAAOC,UAC9CE,GACFD,EAAQI,KAAKH,GAGRD,EAAQK,KAAK,kFA5BXC,SAAAA,GAAW,GAAKC,SAChBC,GAAaD,SACbT,GAAgBS,sKACxBE,EAAA,EAAAC,EAAYH,EAAQpB,WACpBwB,EAALC,OAAAC,UAAuBC,yBACXH,EAAWxB"}

package/public/adeo/components/flag/Flag.svelte

@@ -0,0 +1,45 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type { FlagTheme } from './flag.types';
+
+  export let bordered = false;
+  export let label: string;
+  export let theme: FlagTheme;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function getAppearanceClass(theme: FlagTheme, isBordered: boolean): string {
+    if (!isBordered && !theme) {
+      return '';
+    }
+
+    const type = isBordered ? 'bordered' : 'solid';
+
+    if (theme) {
+      return `mc-flag--${type}-${theme}`;
+    }
+    return `mc-flag--${type}`;
+  }
+
+  function setClasses(theme: FlagTheme, isBordered: boolean) {
+    const classes = ['mc-flag'];
+
+    const appearanceClass = getAppearanceClass(theme, isBordered);
+    if (appearanceClass) {
+      classes.push(appearanceClass);
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<div class="{setClasses(theme, bordered)} {userClass}" {...attributes}>
+  <span class="mc-flag__label">{label}</span>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.flag';
+</style>

package/public/adeo/components/flag/flag.types.d.ts

@@ -0,0 +1,2 @@
+export type FlagTheme = 'danger' | 'dark' | 'light';
+//# sourceMappingURL=flag.types.d.ts.map

package/public/adeo/components/flag/flag.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.types.d.ts","sourceRoot":"","sources":["../../../../src/components/flag/flag.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC"}