@mozaic-ds/web-components 0.24.0 → 0.26.0

package/public/adeo/components/listbox/Listbox.nested.svelte

@@ -13,16 +13,18 @@
   export let name: string = `listboxradio-${uuid}`;
   export let items: string;
   export let value: any;
-  export let open: boolean;
   export let multiple: boolean;
   export let isfiltered: boolean;
   export let emptysearchlabel = 'No results found';
   export let datatextexpr = 'label';
   export let datavalueexpr = 'value';
   export let datadisabledexpr = 'disabled';
-  export let maxwidth = '100%';
+  export let maxwidth: string;
   export let selectall = false;
   export let labelselectall = 'Select all';
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
 
   let eventHandler = new EventHandler(
     get_current_component(),
@@ -80,69 +82,74 @@
   }
 </script>
 
-<ul
-  role="listbox"
+<div
   class="mc-listbox"
-  class:is-open={open}
+  class:mc-listbox--options={type === 'options'}
   class:mc-listbox--multi={multiple}
-  aria-labelledby="listbox"
-  style="--listbox-width: {maxwidth};"
-  use:scrollEnd
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth: {maxwidth}; --listbox-width: {width};"
 >
   {#if !isfiltered}
-    {#if multiple && selectall}
-      <li class="mc-listbox__item">
-        <input
-          id="select-all"
-          class="mc-listbox__input mc-checkbox__input"
-          type="checkbox"
-          indeterminate={selectAllIndeterminate}
-          bind:checked={allSelected}
-          on:change={onSelectAll}
-        />
-        <label for="select-all" class="mc-listbox__label">
-          {labelselectall}
-        </label>
-      </li>
-    {/if}
-    {#each parsedItems as item, index}
-      <li class="mc-listbox__item" class:is-disabled={item[datadisabledexpr]}>
-        {#if !multiple}
+    <ul
+      role="listbox"
+      class="mc-listbox__list"
+      aria-labelledby="listbox"
+      use:scrollEnd
+    >
+      {#if multiple && selectall}
+        <li class="mc-listbox__tile">
           <input
-            id={setItemId(index)}
-            class="mc-listbox__input"
-            class:is-disabled={item[datadisabledexpr]}
-            type="radio"
-            value={item[datavalueexpr]}
-            {name}
-            disabled={Boolean(item[datadisabledexpr])}
-            bind:group={value}
-            on:change
-          />
-        {:else}
-          <input
-            id={setItemId(index)}
+            id="select-all"
             class="mc-listbox__input mc-checkbox__input"
             type="checkbox"
-            value={item[datavalueexpr]}
-            checked={value.includes(item[datavalueexpr])}
-            disabled={Boolean(item[datadisabledexpr])}
-            bind:group={value}
-            on:change
+            indeterminate={selectAllIndeterminate}
+            bind:checked={allSelected}
+            on:change={onSelectAll}
           />
-        {/if}
+          <label for="select-all" class="mc-listbox__label">
+            {labelselectall}
+          </label>
+        </li>
+      {/if}
+      {#each parsedItems as item, index}
+        <li class="mc-listbox__tile" class:is-disabled={item[datadisabledexpr]}>
+          {#if !multiple}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input"
+              class:is-disabled={item[datadisabledexpr]}
+              type="radio"
+              value={item[datavalueexpr]}
+              {name}
+              disabled={Boolean(item[datadisabledexpr])}
+              bind:group={value}
+              on:change
+            />
+          {:else}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input mc-checkbox__input"
+              type="checkbox"
+              value={item[datavalueexpr]}
+              checked={value.includes(item[datavalueexpr])}
+              disabled={Boolean(item[datadisabledexpr])}
+              bind:group={value}
+              on:change
+            />
+          {/if}
 
-        <label for={setItemId(index)} class="mc-listbox__label">
-          {item[datatextexpr]}
-        </label>
-      </li>
-    {/each}
+          <label for={setItemId(index)} class="mc-listbox__label">
+            {item[datatextexpr]}
+          </label>
+        </li>
+      {/each}
+    </ul>
   {:else}
-    <li class="mc-listbox__item">
-      <span class="mc-listbox__empty">{emptysearchlabel}</span>
-    </li>
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
   {/if}
-</ul>
+</div>
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/all-settings';

package/public/adeo/components/listbox/Listbox.svelte

@@ -10,13 +10,15 @@
 
   export let items: string;
   export let value: any;
-  export let open: boolean;
   export let multiple: boolean;
   export let isfiltered: boolean;
   export let emptysearchlabel = 'No results found';
   export let datatextexpr = 'label';
   export let datavalueexpr = 'value';
-  export let maxwidth = '100%';
+  export let maxwidth: string;
+  export let overlay: boolean;
+  export let width: string;
+  export let type = 'options';
 
   const uuid = Math.random();
   let eventHandler = new EventHandler(
@@ -41,52 +43,57 @@
   }
 </script>
 
-<ul
-  role="listbox"
+<div
   class="mc-listbox"
-  class:is-open={open}
+  class:mc-listbox--options={type === 'options'}
   class:mc-listbox--multi={multiple}
-  aria-labelledby="listbox"
-  style="--listbox-width: {maxwidth};"
-  use:scrollEnd
-  {...attributes}
+  class:mc-listbox--overlay={overlay}
+  style="--listbox-maxwidth: {maxwidth}; --listbox-width: {width};"
 >
   {#if !isfiltered}
-    {#each parsedItems as item, index}
-      <li class="mc-listbox__item">
-        {#if !multiple}
-          <input
-            id={setItemId(index)}
-            class="mc-listbox__input"
-            type="radio"
-            value={item[datavalueexpr]}
-            name={`listboxradio-${uuid}`}
-            bind:group={value}
-            on:change
-          />
-        {:else}
-          <input
-            id={setItemId(index)}
-            class="mc-listbox__input mc-checkbox__input"
-            type="checkbox"
-            value={item[datavalueexpr]}
-            checked={value.includes(item[datavalueexpr])}
-            bind:group={value}
-            on:change
-          />
-        {/if}
+    <ul
+      role="listbox"
+      class="mc-listbox__list"
+      aria-labelledby="listbox"
+      use:scrollEnd
+      {...attributes}
+    >
+      {#each parsedItems as item, index}
+        <li class="mc-listbox__tile">
+          {#if !multiple}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input"
+              type="radio"
+              value={item[datavalueexpr]}
+              name={`listboxradio-${uuid}`}
+              bind:group={value}
+              on:change
+            />
+          {:else}
+            <input
+              id={setItemId(index)}
+              class="mc-listbox__input mc-checkbox__input"
+              type="checkbox"
+              value={item[datavalueexpr]}
+              checked={value.includes(item[datavalueexpr])}
+              bind:group={value}
+              on:change
+            />
+          {/if}
 
-        <label for={setItemId(index)} class="mc-listbox__label">
-          {item[datatextexpr]}
-        </label>
-      </li>
-    {/each}
+          <label for={setItemId(index)} class="mc-listbox__label">
+            {item[datatextexpr]}
+          </label>
+        </li>
+      {/each}
+    </ul>
   {:else}
-    <li class="mc-listbox__item">
-      <span class="mc-listbox__empty">{emptysearchlabel}</span>
-    </li>
+    <div class="mc-listbox__tile mc-listbox__tile--empty">
+      <span class="mc-listbox__label">{emptysearchlabel}</span>
+    </div>
   {/if}
-</ul>
+</div>
 
 <style lang="scss">
   @import '@mozaic-ds/styles/settings-tools/all-settings';

package/public/adeo/components/menu/Menu.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as i,g as n,b as s,f as l,s as a,e as o,n as c,h as m,l as r,q as d,Q as u,u as f,v as g,w as h,d as b,t as p,k as _,m as k,o as w}from"../../index-48da6c1f.js";import{E as x}from"../../EventHandler-f7ee47ca.js";function v(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function $(e){let t,i,n;return{c(){t=o("span"),i=o("slot"),m(i,"prop",n=e[8]),m(i,"name","icon"),m(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),r(t,i)},p(e,t){2&t&&n!==(n=e[8])&&m(i,"prop",n)},d(e){e&&d(t)}}}function y(e){let t,i,n,l,a,c,u,f,g,h,x=`<${C(e[8].iconName,e[0]===e[10])} />`,v=e[8].label+"",y=e[3].icon&&$(e);function E(){return e[6](e[10],e[8])}return{c(){t=o("li"),i=o("div"),n=o("span"),l=b(),y&&y.c(),a=b(),c=o("span"),u=p(v),f=b(),m(n,"class","mc-menu__icon"),m(c,"class","mc-menu__label"),m(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),m(t,"class","mc-menu__item")},m(e,o){s(e,t,o),r(t,i),r(i,n),n.innerHTML=x,r(i,l),y&&y.m(i,null),r(i,a),r(i,c),r(c,u),r(t,f),g||(h=k(i,"click",E),g=!0)},p(t,s){e=t,3&s&&x!==(x=`<${C(e[8].iconName,e[0]===e[10])} />`)&&(n.innerHTML=x),e[3].icon?y?y.p(e,s):(y=$(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&v!==(v=e[8].label+"")&&w(u,v),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),y&&y.d(),g=!1,h()}}}function E(e){let t,i,n=e[1],l=[];for(let t=0;t<n.length;t+=1)l[t]=y(v(e,n,t));return{c(){t=o("nav"),i=o("ul");for(let e=0;e<l.length;e+=1)l[e].c();this.c=c,m(i,"class","mc-menu__list"),m(t,"class","mc-menu"),m(t,"aria-label","menu")},m(e,n){s(e,t,n),r(t,i);for(let e=0;e<l.length;e+=1)l[e]&&l[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=v(e,n,s);l[s]?l[s].p(a,t):(l[s]=y(a),l[s].c(),l[s].m(i,null))}for(;s<l.length;s+=1)l[s].d(1);l.length=n.length}},i:c,o:c,d(e){e&&d(t),u(l,e)}}}function C(e,t){return t?`${e} fill="white" `:`${e} `}function z(e,t,i){let n,s,{$$slots:l={},$$scope:a}=t;const o=f(l);let{items:c}=t,{selected:m}=t,r=new x(g(),h());function d(e,t){i(0,s=e),r.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,c=e.items),"selected"in e&&i(5,m=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=c?JSON.parse(c):[]),32&e.$$.dirty&&i(0,s=m?Number(m):"")},[s,n,d,o,c,m,(e,t)=>d(e,t)]}class L extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-menu{max-width:16rem}.mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{border-radius:0.25rem;list-style:none;overflow:hidden;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__link{font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;width:100%}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeedea}.mc-menu__link:active{background-color:#dddcd5}.mc-menu__link.is-active{background-color:#007f8c}.mc-menu__link.is-active .mc-menu__label{font-family:\"Roboto\", sans-serif;font-weight:700}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"Roboto\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(o),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},z,E,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),l()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),l()}}export{L as default};
+import{S as e,i as t,a as i,g as n,b as s,f as l,s as a,e as o,n as c,h as r,l as m,q as d,Q as u,u as f,v as g,w as h,d as b,t as p,k as _,m as k,o as w}from"../../index-48da6c1f.js";import{E as x}from"../../EventHandler-f7ee47ca.js";function v(e,t,i){const n=e.slice();return n[8]=t[i],n[10]=i,n}function $(e){let t,i,n;return{c(){t=o("span"),i=o("slot"),r(i,"prop",n=e[8]),r(i,"name","icon"),r(t,"class","mc-menu__icon")},m(e,n){s(e,t,n),m(t,i)},p(e,t){2&t&&n!==(n=e[8])&&r(i,"prop",n)},d(e){e&&d(t)}}}function y(e){let t,i,n,l,a,c,u,f,g,h,x=`<${C(e[8].iconName,e[0]===e[10])} />`,v=e[8].label+"",y=e[3].icon&&$(e);function E(){return e[6](e[10],e[8])}return{c(){t=o("li"),i=o("div"),n=o("span"),l=b(),y&&y.c(),a=b(),c=o("span"),u=p(v),f=b(),r(n,"class","mc-menu__icon"),r(c,"class","mc-menu__label"),r(i,"class","mc-menu__link"),_(i,"is-active",e[0]===e[10]),_(i,"is-disabled",e[8].disabled),r(t,"class","mc-menu__item")},m(e,o){s(e,t,o),m(t,i),m(i,n),n.innerHTML=x,m(i,l),y&&y.m(i,null),m(i,a),m(i,c),m(c,u),m(t,f),g||(h=k(i,"click",E),g=!0)},p(t,s){e=t,3&s&&x!==(x=`<${C(e[8].iconName,e[0]===e[10])} />`)&&(n.innerHTML=x),e[3].icon?y?y.p(e,s):(y=$(e),y.c(),y.m(i,a)):y&&(y.d(1),y=null),2&s&&v!==(v=e[8].label+"")&&w(u,v),1&s&&_(i,"is-active",e[0]===e[10]),2&s&&_(i,"is-disabled",e[8].disabled)},d(e){e&&d(t),y&&y.d(),g=!1,h()}}}function E(e){let t,i,n=e[1],l=[];for(let t=0;t<n.length;t+=1)l[t]=y(v(e,n,t));return{c(){t=o("nav"),i=o("ul");for(let e=0;e<l.length;e+=1)l[e].c();this.c=c,r(i,"class","mc-menu__list"),r(t,"class","mc-menu"),r(t,"aria-label","menu")},m(e,n){s(e,t,n),m(t,i);for(let e=0;e<l.length;e+=1)l[e]&&l[e].m(i,null)},p(e,[t]){if(15&t){let s;for(n=e[1],s=0;s<n.length;s+=1){const a=v(e,n,s);l[s]?l[s].p(a,t):(l[s]=y(a),l[s].c(),l[s].m(i,null))}for(;s<l.length;s+=1)l[s].d(1);l.length=n.length}},i:c,o:c,d(e){e&&d(t),u(l,e)}}}function C(e,t){return t?`${e} fill="white" `:`${e} `}function z(e,t,i){let n,s,{$$slots:l={},$$scope:a}=t;const o=f(l);let{items:c}=t,{selected:r}=t,m=new x(g(),h());function d(e,t){i(0,s=e),m.dispatch("item-selected",{index:e,item:t})}return e.$$set=e=>{"items"in e&&i(4,c=e.items),"selected"in e&&i(5,r=e.selected)},e.$$.update=()=>{16&e.$$.dirty&&i(1,n=c?JSON.parse(c):[]),32&e.$$.dirty&&i(0,s=r?Number(r):"")},[s,n,d,o,c,r,(e,t)=>d(e,t)]}class L extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-menu,.mc-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-menu__list{border-radius:0.25rem;list-style:none;overflow:hidden;padding:0;margin:0}.mc-menu__item{position:relative}.mc-menu__item:not(:last-child) .mc-menu__link::after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%}.mc-menu__item:not(:last-child) .mc-menu__link::after{bottom:0;position:absolute;left:0}.mc-menu__item:not(:last-child) .mc-menu__link.is-active::after{display:none}.mc-menu__link{font-weight:400;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#ffffff;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-position:center right 1rem;background-repeat:no-repeat;background-size:1rem;border:none;cursor:pointer;color:#191919;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.5rem;height:3.5rem;font-family:inherit;padding-right:3rem;padding-left:1rem;position:relative;text-decoration:none;width:100%}.mc-menu__link.is-active,.mc-menu__link.is-disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");color:#ffffff}.mc-menu__link:hover{background-color:#eeedea}.mc-menu__link:active{background-color:#dddcd5}.mc-menu__link.is-active{background-color:#007f8c}.mc-menu__link.is-active .mc-menu__label{font-family:\"Roboto\", sans-serif;font-weight:700}.mc-menu__link.is-disabled{background-color:#e6e6e6;cursor:not-allowed}.mc-menu__icon{-ms-flex-negative:0;flex-shrink:0}.mc-menu__label{font-size:1rem;line-height:1.375;font-family:\"Roboto\", sans-serif;font-weight:400;display:-webkit-box;max-height:2.75rem;overflow:hidden;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical}",this.shadowRoot.appendChild(o),t(this,{target:this.shadowRoot,props:{...i(this.attributes),$$slots:n(this)},customElement:!0},z,E,a,{items:4,selected:5},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["items","selected"]}get items(){return this.$$.ctx[4]}set items(e){this.$$set({items:e}),l()}get selected(){return this.$$.ctx[5]}set selected(e){this.$$set({selected:e}),l()}}export{L as default};
 //# sourceMappingURL=Menu.js.map