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

package/public/bricoman/utilities/DataTableUtilities.ts

@@ -11,6 +11,7 @@ import type {
   SelectionParams,
   ProgressBar,
   Button,
+  FileFormat,
 } from '../components/datatable/datatable.types';
 
 const customTextFormatter = (customText: CustomText): string => {
@@ -23,6 +24,13 @@ const customTextFormatter = (customText: CustomText): string => {
   );
   return customTextHtml;
 };
+const customNumberFormatter = (number: Number): string => {
+  return number !== null && number !== undefined
+    ? `<span style="display: flex; justify-content: end;"> ${Number(
+        number,
+      )} </span>`
+    : '';
+};
 const imageFormatter = (image: Image): string =>
   `<img style="${
     image.style || 'width: 35px; height: 35px; margin-right: 8px;'
@@ -33,6 +41,14 @@ const badgeFormatter = (badge: Badge): string =>
   }</div>`;
 const linkFormatter = (link: Link): string =>
   `<a class="mc-link" href=${link.href} >${link.text}</a>`;
+
+const fileFormatter = (file: FileFormat, id: string): string =>
+  `<div class="mc-tooltip mc-tooltip--top">
+      <span id="tooltipTop" class="mc-tooltip__content" role="tooltip">
+        ${file.documentNameTooltip}
+      </span>
+      <span class="mc-link" id=cell-file-${id} style="${file.style}"> ${file.documentName}</span>
+  </div>`;
 const linkWithoutRedirectFormatter = (link: Link, id: string): string =>
   `<a class="mc-link" id=cell-link-${id} href=${link.href} onclick="return false;">${link.text}</a>`;
 const progressBarFormatter = (progressBar: ProgressBar): string => {
@@ -77,12 +93,16 @@ const getFormattedCell = (
       return cellValue as string;
     case 'CustomText':
       return customTextFormatter(cellValue as CustomText);
+    case 'Number':
+      return customNumberFormatter(cellValue as Number);
     case 'Image':
       return imageFormatter(cellValue as Image);
     case 'Badge':
       return badgeFormatter(cellValue as Badge);
     case 'Link':
       return linkFormatter(cellValue as Link);
+    case 'FileFormat':
+      return fileFormatter(cellValue as FileFormat, id);
     case 'LinkWithoutRedirect':
       return linkWithoutRedirectFormatter(cellValue as Link, id);
     case 'ProgressBar':
@@ -102,7 +122,7 @@ export const getCellContent = (
 ): string => {
   const cellValue = bodyData?.cells[headData.id];
 
-  return cellValue
+  return cellValue || Number(cellValue) === 0
     ? getFormattedCell(headData.cellsFormat, cellValue, bodyData.id)
     : '';
 };
@@ -165,7 +185,7 @@ export const onePageSort = (
 
   switch (cellsFormat) {
     default:
-    case 'Text':
+    case 'Text' || 'Number':
       if (sortDirection === 'asc') {
         compareFunction = (a: BodyData, b: BodyData) =>
           a.cells[columnId] > b.cells[columnId] ? 1 : -1;

package/public/bundle.js

@@ -48,6 +48,7 @@ import Sidebar from './components/sidebar/Sidebar.js';
 import OptionButton from './components/optionbutton/OptionButton.js';
 import Header from './components/header/Header.js';
 import TagList from './components/taglist/TagList.js';
+import Kpi from './components/kpi/Kpi.js';
 
 if (!customElements.get('m-accordion')) {
   customElements.define('m-accordion', Accordion);
@@ -247,3 +248,7 @@ if (!customElements.get('m-header')) {
 if (!customElements.get('m-taglist')) {
   customElements.define('m-taglist', TagList);
 }
+
+if (!customElements.get('m-kpi')) {
+  customElements.define('m-kpi', Kpi);
+}

package/public/components/accordion/Accordion.js

@@ -1,2 +1,366 @@
-import{S as o,i as e,a as i,b as c,f as a,s as t,c as n,e as r,d,t as s,n as l,g as m,h as g,j as b,l as h,k as w,m as p,o as x,p as M,q as u}from"../../index-c33b3772.js";import{E as I}from"../../EventHandler-02058705.js";function _(o){let e,i=`<${f(o[2],String(o[3]),o[1])} />`;return{c(){e=r("span"),m(e,"class","mc-accordion__icon")},m(o,a){c(o,e,a),e.innerHTML=i},p(o,c){14&c&&i!==(i=`<${f(o[2],String(o[3]),o[1])} />`)&&(e.innerHTML=i)},d(o){o&&x(e)}}}function D(o){let e,i,a,t,M,u,I,D,f,k,A,y,v,C,E,Z,z,L=o[2]&&_(o),j=[{class:E="mc-accordion "+(o[1]?`mc-accordion--${o[1]}`:"")+" "+(o[8]?" is-open":"")+" "+(o[5]?" mc-accordion--no-padding":"")+" "+(o[6]?" mc-accordion--checkable":"")+" "+(o[4]?" is-disabled":"")+" "+o[9]},o[7]],N={};for(let o=0;o<j.length;o+=1)N=n(N,j[o]);return{c(){e=r("div"),i=r("div"),a=r("slot"),t=d(),M=r("h2"),u=r("button"),L&&L.c(),I=d(),D=s(o[0]),f=d(),k=r("slot"),y=d(),v=r("div"),C=r("slot"),this.c=l,m(a,"name","beforeLabel"),m(k,"name","afterLabel"),m(u,"id","m-accordion"),m(u,"class","mc-accordion__trigger"),m(u,"type","button"),m(u,"aria-controls","content"),m(u,"aria-expanded",A=!o[8]),u.disabled=o[4],m(M,"class","mc-accordion__title"),m(i,"class","mc-accordion__header"),m(v,"id","content"),m(v,"class","mc-accordion__content"),m(v,"aria-hidden",o[8]),m(v,"aria-labelledby","m-accordion"),g(e,N)},m(n,r){c(n,e,r),b(e,i),b(i,a),b(i,t),b(i,M),b(M,u),L&&L.m(u,null),b(u,I),b(u,D),b(u,f),b(u,k),b(e,y),b(e,v),b(v,C),Z||(z=h(u,"click",o[10]),Z=!0)},p(o,[i]){o[2]?L?L.p(o,i):(L=_(o),L.c(),L.m(u,I)):L&&(L.d(1),L=null),1&i&&w(D,o[0]),256&i&&A!==(A=!o[8])&&m(u,"aria-expanded",A),16&i&&(u.disabled=o[4]),256&i&&m(v,"aria-hidden",o[8]),g(e,N=p(j,[882&i&&E!==(E="mc-accordion "+(o[1]?`mc-accordion--${o[1]}`:"")+" "+(o[8]?" is-open":"")+" "+(o[5]?" mc-accordion--no-padding":"")+" "+(o[6]?" mc-accordion--checkable":"")+" "+(o[4]?" is-disabled":"")+" "+o[9])&&{class:E},128&i&&o[7]]))},i:l,o:l,d(o){o&&x(e),L&&L.d(),Z=!1,z()}}}function f(o,e,i){return"s"===i?`${o} size="1.5rem"`:`${o} size="2rem" fill="${e}"`}function k(o,e,i){let c,a,t;const r=["label","size","iconname","iconcolor","open","disabled","nopadding","checkable"];let d=M(e,r),{label:s}=e,{size:l="m"}=e,{iconname:m}=e,{iconcolor:g}=e,{open:b=!1}=e,{disabled:h=!1}=e,{nopadding:w=!1}=e,{checkable:p=!1}=e,x=new I;return o.$$set=o=>{i(14,e=n(n({},e),u(o))),i(13,d=M(e,r)),"label"in o&&i(0,s=o.label),"size"in o&&i(1,l=o.size),"iconname"in o&&i(2,m=o.iconname),"iconcolor"in o&&i(3,g=o.iconcolor),"open"in o&&i(11,b=o.open),"disabled"in o&&i(4,h=o.disabled),"nopadding"in o&&i(5,w=o.nopadding),"checkable"in o&&i(6,p=o.checkable)},o.$$.update=()=>{2048&o.$$.dirty&&i(8,c=!!b),i(9,a=e.class),i(7,t=Object.assign({},d)),128&o.$$.dirty&&delete t.class},e=u(e),[s,l,m,g,h,w,p,t,c,a,function(){x.dispatch("on-heading-click",c),i(8,c=!c)},b]}class A extends o{constructor(o){super();const n=document.createElement("style");n.textContent='.mc-accordion{background-color:#ffffff;border-bottom:1px solid #666666;font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-accordion .mc-accordion__icon{height:2rem;width:2rem}.mc-accordion .mc-accordion__title{font-size:1.125rem;line-height:1.3333333333}.mc-accordion button.mc-accordion__trigger{padding-top:1.25rem;padding-right:3rem;padding-bottom:1.25rem}.mc-accordion button.mc-accordion__trigger::before{content:"";position:absolute;top:calc(50% - 0.75rem);right:0.5rem;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMxOTE5MTkiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=");background-size:1.5rem;width:1.5rem;height:1.5rem}.mc-accordion button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2NjY2NjYiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=")}.mc-accordion.is-open>.mc-accordion__header button.mc-accordion__trigger::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+")}.mc-accordion.is-open>.mc-accordion__header button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+")}.mc-accordion__label{font-weight:600;position:relative;background-position:right 0.5rem center;background-repeat:no-repeat;color:#191919;cursor:pointer;display:block;padding-left:0.5rem;position:relative;pointer-events:none}.mc-accordion__label::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;top:-0.125rem;right:-0.125rem;bottom:-3px;left:-0.125rem}.mc-accordion__label:hover{background-color:#e6e6e6}.mc-accordion__label--no-padding{padding-left:0}.mc-accordion__label--icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem}.mc-accordion__icon{fill:#808080}.mc-accordion__content{font-size:1rem;line-height:1.375;color:#333333;height:auto;max-height:0;overflow:hidden;padding-left:0.5rem;-webkit-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out;visibility:hidden}.mc-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-accordion__header:hover{background-color:#e6e6e6}.mc-accordion__title{font-weight:600;color:#191919;width:100%;margin-top:0;margin-bottom:0}.mc-accordion button.mc-accordion__trigger{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;position:relative;background-position:right 0.5rem center;background-repeat:no-repeat;background-color:transparent;color:currentColor;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem;padding-left:0.5rem;text-align:left;width:100%}.mc-accordion button.mc-accordion__trigger::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;top:-0.125rem;right:-0.125rem;bottom:-3px;left:-0.125rem}.mc-accordion button.mc-accordion__trigger:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-accordion button.mc-accordion__trigger:disabled{background-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-accordion.is-open>.mc-accordion__content{max-height:10000vh;padding-top:0.5rem;padding-bottom:calc(1.5rem - 1px);visibility:visible}.mc-accordion.is-disabled>.mc-accordion__content{color:#666666;cursor:not-allowed}.mc-accordion--checkable .mc-accordion__header{padding-left:0.5rem;position:relative}.mc-accordion--checkable .mc-accordion__trigger{position:static}.mc-accordion--no-padding .mc-accordion__header,.mc-accordion--no-padding .mc-accordion__trigger{padding-left:0}.mc-accordion--s .mc-accordion__icon{height:1.5rem;width:1.5rem}.mc-accordion--s .mc-accordion__title{font-size:1rem;line-height:1.375}.mc-accordion--s button.mc-accordion__trigger{padding-top:1rem;padding-right:2.5rem;padding-bottom:1rem}.mc-accordion--s button.mc-accordion__trigger::before{content:"";position:absolute;top:calc(50% - 0.5rem);right:0.5rem;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-size:1rem;width:1rem;height:1rem}.mc-accordion--s button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=")}.mc-accordion--s.is-open>.mc-accordion__header button.mc-accordion__trigger::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==")}.mc-accordion--s.is-open>.mc-accordion__header button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==")}:host{display:block}',this.shadowRoot.appendChild(n),e(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},k,D,t,{label:0,size:1,iconname:2,iconcolor:3,open:11,disabled:4,nopadding:5,checkable:6},null),o&&(o.target&&c(o.target,this,o.anchor),o.props&&(this.$set(o.props),a()))}static get observedAttributes(){return["label","size","iconname","iconcolor","open","disabled","nopadding","checkable"]}get label(){return this.$$.ctx[0]}set label(o){this.$$set({label:o}),a()}get size(){return this.$$.ctx[1]}set size(o){this.$$set({size:o}),a()}get iconname(){return this.$$.ctx[2]}set iconname(o){this.$$set({iconname:o}),a()}get iconcolor(){return this.$$.ctx[3]}set iconcolor(o){this.$$set({iconcolor:o}),a()}get open(){return this.$$.ctx[11]}set open(o){this.$$set({open:o}),a()}get disabled(){return this.$$.ctx[4]}set disabled(o){this.$$set({disabled:o}),a()}get nopadding(){return this.$$.ctx[5]}set nopadding(o){this.$$set({nopadding:o}),a()}get checkable(){return this.$$.ctx[6]}set checkable(o){this.$$set({checkable:o}),a()}}export{A 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, d as space, t as text, n as noop, g as attr, h as set_attributes, j as append, l as listen, 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';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+
+/* src/components/accordion/Accordion.svelte generated by Svelte v3.58.0 */
+
+function create_if_block(ctx) {
+	let span;
+	let raw_value = `<${generateIconName(/*iconname*/ ctx[2], String(/*iconcolor*/ ctx[3]), /*size*/ ctx[1])} />` + "";
+
+	return {
+		c() {
+			span = element("span");
+			attr(span, "class", "mc-accordion__icon");
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			span.innerHTML = raw_value;
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconname, iconcolor, size*/ 14 && raw_value !== (raw_value = `<${generateIconName(/*iconname*/ ctx[2], String(/*iconcolor*/ ctx[3]), /*size*/ ctx[1])} />` + "")) span.innerHTML = raw_value;		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div2;
+	let div0;
+	let slot0;
+	let t0;
+	let h2;
+	let button;
+	let t1;
+	let t2;
+	let t3;
+	let slot1;
+	let button_aria_expanded_value;
+	let t4;
+	let div1;
+	let slot2;
+	let div2_class_value;
+	let mounted;
+	let dispose;
+	let if_block = /*iconname*/ ctx[2] && create_if_block(ctx);
+
+	let div2_levels = [
+		{
+			class: div2_class_value = "mc-accordion " + (/*size*/ ctx[1]
+			? `mc-accordion--${/*size*/ ctx[1]}`
+			: '') + " " + (/*isOpen*/ ctx[8] ? ' is-open' : '') + " " + (/*nopadding*/ ctx[5] ? ' mc-accordion--no-padding' : '') + " " + (/*checkable*/ ctx[6] ? ' mc-accordion--checkable' : '') + " " + (/*disabled*/ ctx[4] ? ' is-disabled' : '') + " " + /*userClass*/ ctx[9]
+		},
+		/*attributes*/ ctx[7]
+	];
+
+	let div_data_2 = {};
+
+	for (let i = 0; i < div2_levels.length; i += 1) {
+		div_data_2 = assign(div_data_2, div2_levels[i]);
+	}
+
+	return {
+		c() {
+			div2 = element("div");
+			div0 = element("div");
+			slot0 = element("slot");
+			t0 = space();
+			h2 = element("h2");
+			button = element("button");
+			if (if_block) if_block.c();
+			t1 = space();
+			t2 = text(/*label*/ ctx[0]);
+			t3 = space();
+			slot1 = element("slot");
+			t4 = space();
+			div1 = element("div");
+			slot2 = element("slot");
+			this.c = noop;
+			attr(slot0, "name", "beforeLabel");
+			attr(slot1, "name", "afterLabel");
+			attr(button, "id", "m-accordion");
+			attr(button, "class", "mc-accordion__trigger");
+			attr(button, "type", "button");
+			attr(button, "aria-controls", "content");
+			attr(button, "aria-expanded", button_aria_expanded_value = !/*isOpen*/ ctx[8]);
+			button.disabled = /*disabled*/ ctx[4];
+			attr(h2, "class", "mc-accordion__title");
+			attr(div0, "class", "mc-accordion__header");
+			attr(div1, "id", "content");
+			attr(div1, "class", "mc-accordion__content");
+			attr(div1, "aria-hidden", /*isOpen*/ ctx[8]);
+			attr(div1, "aria-labelledby", "m-accordion");
+			set_attributes(div2, div_data_2);
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			append(div2, div0);
+			append(div0, slot0);
+			append(div0, t0);
+			append(div0, h2);
+			append(h2, button);
+			if (if_block) if_block.m(button, null);
+			append(button, t1);
+			append(button, t2);
+			append(button, t3);
+			append(button, slot1);
+			append(div2, t4);
+			append(div2, div1);
+			append(div1, slot2);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*handleState*/ ctx[10]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (/*iconname*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(button, t1);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*label*/ 1) set_data(t2, /*label*/ ctx[0]);
+
+			if (dirty & /*isOpen*/ 256 && button_aria_expanded_value !== (button_aria_expanded_value = !/*isOpen*/ ctx[8])) {
+				attr(button, "aria-expanded", button_aria_expanded_value);
+			}
+
+			if (dirty & /*disabled*/ 16) {
+				button.disabled = /*disabled*/ ctx[4];
+			}
+
+			if (dirty & /*isOpen*/ 256) {
+				attr(div1, "aria-hidden", /*isOpen*/ ctx[8]);
+			}
+
+			set_attributes(div2, div_data_2 = get_spread_update(div2_levels, [
+				dirty & /*size, isOpen, nopadding, checkable, disabled, userClass*/ 882 && div2_class_value !== (div2_class_value = "mc-accordion " + (/*size*/ ctx[1]
+				? `mc-accordion--${/*size*/ ctx[1]}`
+				: '') + " " + (/*isOpen*/ ctx[8] ? ' is-open' : '') + " " + (/*nopadding*/ ctx[5] ? ' mc-accordion--no-padding' : '') + " " + (/*checkable*/ ctx[6] ? ' mc-accordion--checkable' : '') + " " + (/*disabled*/ ctx[4] ? ' is-disabled' : '') + " " + /*userClass*/ ctx[9]) && { class: div2_class_value },
+				dirty & /*attributes*/ 128 && /*attributes*/ ctx[7]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div2);
+			if (if_block) if_block.d();
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function generateIconName(iconname, iconcolor, iconsize) {
+	return iconsize === 's'
+	? `${iconname} size="1.5rem"`
+	: `${iconname} size="2rem" fill="${iconcolor}"`;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let isOpen;
+	let userClass;
+	let attributes;
+
+	const omit_props_names = [
+		"label","size","iconname","iconcolor","open","disabled","nopadding","checkable"
+	];
+
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { label } = $$props;
+	let { size = 'm' } = $$props;
+	let { iconname = undefined } = $$props;
+	let { iconcolor = undefined } = $$props;
+	let { open = false } = $$props;
+	let { disabled = false } = $$props;
+	let { nopadding = false } = $$props;
+	let { checkable = false } = $$props;
+	let eventHandler = new EventHandler();
+
+	function handleState() {
+		eventHandler.dispatch('on-heading-click', isOpen);
+		$$invalidate(8, isOpen = !isOpen);
+	}
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(14, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(13, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('label' in $$new_props) $$invalidate(0, label = $$new_props.label);
+		if ('size' in $$new_props) $$invalidate(1, size = $$new_props.size);
+		if ('iconname' in $$new_props) $$invalidate(2, iconname = $$new_props.iconname);
+		if ('iconcolor' in $$new_props) $$invalidate(3, iconcolor = $$new_props.iconcolor);
+		if ('open' in $$new_props) $$invalidate(11, open = $$new_props.open);
+		if ('disabled' in $$new_props) $$invalidate(4, disabled = $$new_props.disabled);
+		if ('nopadding' in $$new_props) $$invalidate(5, nopadding = $$new_props.nopadding);
+		if ('checkable' in $$new_props) $$invalidate(6, checkable = $$new_props.checkable);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*open*/ 2048) {
+			$$invalidate(8, isOpen = open ? true : false);
+		}
+
+		$$invalidate(9, userClass = $$props.class);
+		$$invalidate(7, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 128) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+
+	return [
+		label,
+		size,
+		iconname,
+		iconcolor,
+		disabled,
+		nopadding,
+		checkable,
+		attributes,
+		isOpen,
+		userClass,
+		handleState,
+		open
+	];
+}
+
+class Accordion extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-accordion{background-color:#ffffff;border-bottom:1px solid #666666;font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-accordion .mc-accordion__icon{height:2rem;width:2rem}.mc-accordion .mc-accordion__title{font-size:1.125rem;line-height:1.3333333333}.mc-accordion button.mc-accordion__trigger{padding-top:1.25rem;padding-right:3rem;padding-bottom:1.25rem}.mc-accordion button.mc-accordion__trigger::before{content:"";position:absolute;top:calc(50% - 0.75rem);right:0.5rem;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMxOTE5MTkiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=");background-size:1.5rem;width:1.5rem;height:1.5rem}.mc-accordion button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2NjY2NjYiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=")}.mc-accordion.is-open>.mc-accordion__header button.mc-accordion__trigger::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+")}.mc-accordion.is-open>.mc-accordion__header button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+")}.mc-accordion__label{font-weight:600;position:relative;background-position:right 0.5rem center;background-repeat:no-repeat;color:#191919;cursor:pointer;display:block;padding-left:0.5rem;position:relative;pointer-events:none}.mc-accordion__label::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;top:-0.125rem;right:-0.125rem;bottom:-3px;left:-0.125rem}.mc-accordion__label:hover{background-color:#e6e6e6}.mc-accordion__label--no-padding{padding-left:0}.mc-accordion__label--icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem}.mc-accordion__icon{fill:#808080}.mc-accordion__content{font-size:1rem;line-height:1.375;color:#333333;height:auto;max-height:0;overflow:hidden;padding-left:0.5rem;-webkit-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out;visibility:hidden}.mc-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-accordion__header:hover{background-color:#e6e6e6}.mc-accordion__title{font-weight:600;color:#191919;width:100%;margin-top:0;margin-bottom:0}.mc-accordion button.mc-accordion__trigger{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;position:relative;background-position:right 0.5rem center;background-repeat:no-repeat;background-color:transparent;color:currentColor;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5rem;padding-left:0.5rem;text-align:left;width:100%}.mc-accordion button.mc-accordion__trigger::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;top:-0.125rem;right:-0.125rem;bottom:-3px;left:-0.125rem}.mc-accordion button.mc-accordion__trigger:focus::after{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}.mc-accordion button.mc-accordion__trigger:disabled{background-color:#e6e6e6;color:#666666;cursor:not-allowed}.mc-accordion.is-open>.mc-accordion__content{max-height:10000vh;padding-top:0.5rem;padding-bottom:calc(1.5rem - 1px);visibility:visible}.mc-accordion.is-disabled>.mc-accordion__content{color:#666666;cursor:not-allowed}.mc-accordion--checkable .mc-accordion__header{padding-left:0.5rem;position:relative}.mc-accordion--checkable .mc-accordion__trigger{position:static}.mc-accordion--no-padding .mc-accordion__header,.mc-accordion--no-padding .mc-accordion__trigger{padding-left:0}.mc-accordion--s .mc-accordion__icon{height:1.5rem;width:1.5rem}.mc-accordion--s .mc-accordion__title{font-size:1rem;line-height:1.375}.mc-accordion--s button.mc-accordion__trigger{padding-top:1rem;padding-right:2.5rem;padding-bottom:1rem}.mc-accordion--s button.mc-accordion__trigger::before{content:"";position:absolute;top:calc(50% - 0.5rem);right:0.5rem;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-size:1rem;width:1rem;height:1rem}.mc-accordion--s button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=")}.mc-accordion--s.is-open>.mc-accordion__header button.mc-accordion__trigger::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMxOTE5MTkiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==")}.mc-accordion--s.is-open>.mc-accordion__header button.mc-accordion__trigger:disabled::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2NjY2NjYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==")}:host{display:block}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				label: 0,
+				size: 1,
+				iconname: 2,
+				iconcolor: 3,
+				open: 11,
+				disabled: 4,
+				nopadding: 5,
+				checkable: 6
+			},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"label",
+			"size",
+			"iconname",
+			"iconcolor",
+			"open",
+			"disabled",
+			"nopadding",
+			"checkable"
+		];
+	}
+
+	get label() {
+		return this.$$.ctx[0];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get size() {
+		return this.$$.ctx[1];
+	}
+
+	set size(size) {
+		this.$$set({ size });
+		flush();
+	}
+
+	get iconname() {
+		return this.$$.ctx[2];
+	}
+
+	set iconname(iconname) {
+		this.$$set({ iconname });
+		flush();
+	}
+
+	get iconcolor() {
+		return this.$$.ctx[3];
+	}
+
+	set iconcolor(iconcolor) {
+		this.$$set({ iconcolor });
+		flush();
+	}
+
+	get open() {
+		return this.$$.ctx[11];
+	}
+
+	set open(open) {
+		this.$$set({ open });
+		flush();
+	}
+
+	get disabled() {
+		return this.$$.ctx[4];
+	}
+
+	set disabled(disabled) {
+		this.$$set({ disabled });
+		flush();
+	}
+
+	get nopadding() {
+		return this.$$.ctx[5];
+	}
+
+	set nopadding(nopadding) {
+		this.$$set({ nopadding });
+		flush();
+	}
+
+	get checkable() {
+		return this.$$.ctx[6];
+	}
+
+	set checkable(checkable) {
+		this.$$set({ checkable });
+		flush();
+	}
+}
+
+export { Accordion as default };
 //# sourceMappingURL=Accordion.js.map

package/public/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { AccordionSize } from './accordion.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let label: string;\n  export let size: AccordionSize = 'm';\n  export let iconname: string | undefined = undefined;\n  export let iconcolor: string | undefined = undefined;\n  export let open = false;\n  export let disabled = false;\n  export let nopadding = false;\n  export let checkable = false;\n  let eventHandler = new EventHandler();\n  $: isOpen = open ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function generateIconName(\n    iconname: string,\n    iconcolor: string,\n    iconsize: string,\n  ): string {\n    return iconsize === 's'\n      ? `${iconname} size=\"1.5rem\"`\n      : `${iconname} size=\"2rem\" fill=\"${iconcolor}\"`;\n  }\n\n  function handleState(): void {\n    eventHandler.dispatch('on-heading-click', isOpen);\n    isOpen = !isOpen;\n  }\n</script>\n\n<div\n  class=\"mc-accordion {size ? `mc-accordion--${size}` : ''}\n    {isOpen ? ' is-open' : ''}\n    {nopadding ? ' mc-accordion--no-padding' : ''}\n    {checkable ? ' mc-accordion--checkable' : ''}\n    {disabled ? ' is-disabled' : ''} \n  {userClass}\"\n  {...attributes}\n>\n  <div class=\"mc-accordion__header\">\n    <slot name=\"beforeLabel\" />\n    <h2 class=\"mc-accordion__title\">\n      <button\n        id=\"m-accordion\"\n        class=\"mc-accordion__trigger\"\n        type=\"button\"\n        aria-controls=\"content\"\n        aria-expanded={!isOpen}\n        {disabled}\n        on:click={handleState}\n      >\n        {#if iconname}\n          <span class=\"mc-accordion__icon\">\n            {@html `<${generateIconName(iconname, String(iconcolor), size)} />`}\n          </span>\n        {/if}\n        {label}\n        <slot name=\"afterLabel\" />\n      </button>\n    </h2>\n  </div>\n  <div\n    id=\"content\"\n    class=\"mc-accordion__content\"\n    aria-hidden={isOpen}\n    aria-labelledby=\"m-accordion\"\n  >\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.accordion';\n\n  :host {\n    display: block;\n  }\n</style>\n"],"names":["raw_value","generateIconName","ctx","String","insert","target","span","anchor","dirty","innerHTML","create_if_block","div2","append","div0","slot0","h2","button","slot1","div1","slot2","class","div2_class_value","iconname","iconcolor","iconsize","label","$$props","size","open","disabled","nopadding","checkable","eventHandler","EventHandler","isOpen","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch"],"mappings":"mPA2DuBA,EAAA,IAAAC,EAAiBC,EAAQ,GAAEC,OAAOD,MAAYA,EAAI,0EAD/DE,EAEMC,EAAAC,EAAAC,yBADO,GAAAC,GAAAR,KAAAA,EAAA,IAAAC,EAAiBC,EAAQ,GAAEC,OAAOD,MAAYA,EAAI,YAAAI,EAAAG,UAAAT,yEAF5DE,EAAQ,IAAAQ,EAAAR,gCApBEA,EAAI,oBAAoBA,EAAI,KAAK,IAAE,KACrDA,EAAM,GAAG,WAAa,IACtB,KAAAA,EAAY,GAAA,4BAA8B,SAC1CA,EAAS,GAAG,2BAA6B,IAAE,KAC3CA,EAAQ,GAAG,eAAiB,IAAE,IAChCA,EAAS,IACNA,EAAU,+IAmBPA,EAAK,uPATUA,EAAM,sKAiBbA,EAAM,wDAlCvBE,EAuCKC,EAAAM,EAAAJ,GA9BHK,EAqBKD,EAAAE,GApBHD,EAA0BC,EAAAC,UAC1BF,EAkBIC,EAAAE,GAjBFH,EAgBQG,EAAAC,uCADNJ,EAAyBI,EAAAC,UAI/BL,EAOKD,EAAAO,GADHN,EAAOM,EAAAC,qBAlBOjB,EAAW,qBAEhBA,EAAQ,kEAKZA,EAAK,mBATUA,EAAM,6EAiBbA,EAAM,8CAjCAA,EAAI,oBAAoBA,EAAI,KAAK,IAAE,KACrDA,EAAM,GAAG,WAAa,IACtB,KAAAA,EAAY,GAAA,4BAA8B,SAC1CA,EAAS,GAAG,2BAA6B,IAAE,KAC3CA,EAAQ,GAAG,eAAiB,IAAE,IAChCA,EAAS,KAAA,CAAAkB,MAAAC,UACNnB,EAAU,gDAvBL,SAAAD,EACPqB,EACAC,EACAC,GAEO,MAAa,MAAbA,KACAF,kBACA,GAAAA,uBAA8BC,+IArB5BE,GAAaC,GACbC,KAAAA,EAAsB,KAAGD,GACzBJ,SAAAA,GAAwCI,GACxCH,UAAAA,GAAyCG,GACzCE,KAAAA,GAAO,GAAKF,GACZG,SAAAA,GAAW,GAAKH,GAChBI,UAAAA,GAAY,GAAKJ,GACjBK,UAAAA,GAAY,GAAKL,EACxBM,MAAmBC,oWACpBC,IAASN,GACTO,EAAA,EAAAC,EAAYV,EAAQN,WACpBiB,EAALC,OAAAC,UAAuBC,2BACXH,EAAWjB,8CAanBY,EAAaS,SAAS,mBAAoBP,GAC1CC,EAAA,EAAAD,GAAUA"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { AccordionSize } from './accordion.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let label: string;\n  export let size: AccordionSize = 'm';\n  export let iconname: string | undefined = undefined;\n  export let iconcolor: string | undefined = undefined;\n  export let open = false;\n  export let disabled = false;\n  export let nopadding = false;\n  export let checkable = false;\n  let eventHandler = new EventHandler();\n  $: isOpen = open ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function generateIconName(\n    iconname: string,\n    iconcolor: string,\n    iconsize: string,\n  ): string {\n    return iconsize === 's'\n      ? `${iconname} size=\"1.5rem\"`\n      : `${iconname} size=\"2rem\" fill=\"${iconcolor}\"`;\n  }\n\n  function handleState(): void {\n    eventHandler.dispatch('on-heading-click', isOpen);\n    isOpen = !isOpen;\n  }\n</script>\n\n<div\n  class=\"mc-accordion {size ? `mc-accordion--${size}` : ''}\n    {isOpen ? ' is-open' : ''}\n    {nopadding ? ' mc-accordion--no-padding' : ''}\n    {checkable ? ' mc-accordion--checkable' : ''}\n    {disabled ? ' is-disabled' : ''} \n  {userClass}\"\n  {...attributes}\n>\n  <div class=\"mc-accordion__header\">\n    <slot name=\"beforeLabel\" />\n    <h2 class=\"mc-accordion__title\">\n      <button\n        id=\"m-accordion\"\n        class=\"mc-accordion__trigger\"\n        type=\"button\"\n        aria-controls=\"content\"\n        aria-expanded={!isOpen}\n        {disabled}\n        on:click={handleState}\n      >\n        {#if iconname}\n          <span class=\"mc-accordion__icon\">\n            {@html `<${generateIconName(iconname, String(iconcolor), size)} />`}\n          </span>\n        {/if}\n        {label}\n        <slot name=\"afterLabel\" />\n      </button>\n    </h2>\n  </div>\n  <div\n    id=\"content\"\n    class=\"mc-accordion__content\"\n    aria-hidden={isOpen}\n    aria-labelledby=\"m-accordion\"\n  >\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.accordion';\n\n  :host {\n    display: block;\n  }\n</style>\n"],"names":[],"mappings":"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"}