@mozaic-ds/web-components 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/adeo/components/header/Header.js +1 -1
- package/public/adeo/components/header/Header.js.map +1 -1
- package/public/adeo/components/header/Header.svelte +2 -2
- package/public/adeo/components/sidebar/Sidebar.js +1 -1
- package/public/adeo/components/sidebar/Sidebar.js.map +1 -1
- package/public/adeo/components/sidebar/Sidebar.svelte +1 -1
- package/public/bricoman/components/header/Header.js +1 -1
- package/public/bricoman/components/header/Header.js.map +1 -1
- package/public/bricoman/components/header/Header.svelte +2 -2
- package/public/bricoman/components/sidebar/Sidebar.js +1 -1
- package/public/bricoman/components/sidebar/Sidebar.js.map +1 -1
- package/public/bricoman/components/sidebar/Sidebar.svelte +1 -1
- package/public/components/header/Header.js +1 -1
- package/public/components/header/Header.js.map +1 -1
- package/public/components/header/Header.svelte +2 -2
- package/public/components/sidebar/Sidebar.js +1 -1
- package/public/components/sidebar/Sidebar.js.map +1 -1
- package/public/components/sidebar/Sidebar.svelte +1 -1
- package/public/utilities/stories/header/Header.stories.d.ts.map +1 -1
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a,_ as i,b as s,f as r,s as n,c as d,e as l,d as c,t as o,n as m,g as h,h as g,z as b,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[16]),nopadding:"true"}}),a.$on("link-clicked",e[25]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.items=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,r,n,d=(e[14]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){s(d,t,l),p(t,a),p(a,i),r||(n=D(t,"click",e[18]),r=!0)},p(e,t){16384&t[0]&&d!==(d=(e[14]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),r=!1,n()}}}function O(e){let t,a;return{c(){t=l("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){s(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[19]?.icons||e[6])&&B(),r=(e[19]?.selector||e[7])&&Z(e);return{c(){t=l("div"),i&&i.c(),a=c(),r&&r.c(),h(t,"class","mc-header__right")},m(e,n){s(e,t,n),i&&i.m(t,null),p(t,a),r&&r.m(t,null)},p(e,s){e[19]?.icons||e[6]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[19]?.selector||e[7]?r?r.p(e,s):(r=Z(e),r.c(),r.m(t,null)):r&&(r.d(1),r=null)},d(e){e&&w(t),i&&i.d(),r&&r.d()}}}function B(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){s(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},m(e,a){s(e,t,a)},p(e,a){524480&a[0]&&b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[15]),nodivider:!0}}),a.$on("tab-clicked",e[26]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};32768&t[0]&&(i.tabs=JSON.stringify(e[15])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,r,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[13]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[8]&&J(e),Z=e[15]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[9]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=l("div"),a=l("div"),j&&j.c(),i=c(),N&&N.c(),r=c(),n=l("div"),y=l("h1"),k=o(e[0]),M=c(),T&&T.c(),z=c(),L&&L.c(),A=c(),B&&B.c(),v=c(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),g(t,W),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},m(d,l){s(d,t,l),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,r),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[27](t),S=!0},p(e,s){e[5]?j?(j.p(e,s),32&s[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[13]?N?N.p(e,s):(N=C(e),N.c(),N.m(a,r)):N&&(N.d(1),N=null),(!S||1&s[0])&&x(k,e[0]),e[1]?T?T.p(e,s):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,s),8&s[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[8]?B&&(B.d(1),B=null):B?B.p(e,s):(B=J(e),B.c(),B.m(t,v)),e[15]?Z?(Z.p(e,s),32768&s[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),g(t,W=$(R,[(!S||4&s[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},512&s[0]&&e[9]])),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[27](null)}}}function W(e,t,a){let i,s,r,n,l,c;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:g}=t;const b=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{hasicons:T}=t,{hasselector:L}=t,{hideoptions:E=!1}=t,C=new j,O=0;function H(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));O>e?e<u.offsetHeight?a(11,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(11,u.style.marginTop="0",u):e<u.offsetHeight?(a(11,u.style.transition="none",u),a(11,u.style.marginTop=-e+"px",u)):(a(11,u.style.transition="margin-top ease-out 0.4s",u),a(11,u.style.marginTop=-u.offsetHeight-5+"px",u)),O=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(31,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(20,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(21,v=e.tabs),"noshadow"in e&&a(22,D=e.noshadow),"a11ylabels"in e&&a(23,I=e.a11ylabels),"scrollcontainer"in e&&a(24,N=e.scrollcontainer),"hasicons"in e&&a(6,T=e.hasicons),"hasselector"in e&&a(7,L=e.hasselector),"hideoptions"in e&&a(8,E=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(16,i="string"==typeof A?JSON.parse(A):A),2097152&e.$$.dirty[0]&&a(15,s="string"==typeof v?JSON.parse(v):v),8388608&e.$$.dirty[0]&&a(14,r="string"==typeof I?JSON.parse(I):I),1048576&e.$$.dirty[0]&&a(13,n=z&&"false"!==z),4194304&e.$$.dirty[0]&&a(12,l=D&&"false"!==D),16777216&e.$$.dirty[0]&&(a(10,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",H),e.addEventListener("scroll",H))}(N)),a(9,c=Object.assign({},m)),512&e.$$.dirty[0]&&delete c.class},[_,f,x,$,w,A,T,L,E,c,p,u,l,n,r,s,i,C,function(){C.dispatch("on-back-click",{})},b,z,v,D,I,N,e=>C.dispatch("link-clicked",e.detail),e=>C.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(11,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"Roboto", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:700;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:20,breadcrumb:5,tabs:21,noshadow:22,a11ylabels:23,scrollcontainer:24,hasicons:6,hasselector:7,hideoptions:8},null,[-1,-1]),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),r()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),r()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),r()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),r()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),r()}get back(){return this.$$.ctx[20]}set back(e){this.$$set({back:e}),r()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),r()}get tabs(){return this.$$.ctx[21]}set tabs(e){this.$$set({tabs:e}),r()}get noshadow(){return this.$$.ctx[22]}set noshadow(e){this.$$set({noshadow:e}),r()}get a11ylabels(){return this.$$.ctx[23]}set a11ylabels(e){this.$$set({a11ylabels:e}),r()}get scrollcontainer(){return this.$$.ctx[24]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),r()}get hasicons(){return this.$$.ctx[6]}set hasicons(e){this.$$set({hasicons:e}),r()}get hasselector(){return this.$$.ctx[7]}set hasselector(e){this.$$set({hasselector:e}),r()}get hideoptions(){return this.$$.ctx[8]}set hideoptions(e){this.$$set({hideoptions:e}),r()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a,_ as i,b as r,f as s,s as n,c as d,e as c,d as o,t as l,n as m,g as h,h as b,z as g,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};131072&t[0]&&(i.items=JSON.stringify(e[17])),64&t[0]&&(i.nopadding=e[6]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=c("button"),a=c("span"),i=l(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,c){r(d,t,c),p(t,a),p(a,i),s||(n=D(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),s=!1,n()}}}function O(e){let t,a;return{c(){t=c("div"),a=l(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){r(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[20]?.icons||e[7])&&B(),s=(e[20]?.selector||e[8])&&Z(e);return{c(){t=c("div"),i&&i.c(),a=o(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){r(e,t,n),i&&i.m(t,null),p(t,a),s&&s.m(t,null)},p(e,r){e[20]?.icons||e[7]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[20]?.selector||e[8]?s?s.p(e,r):(s=Z(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),i&&i.d(),s&&s.d()}}}function B(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){r(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){r(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[16]),nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.tabs=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,s,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[14]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[9]&&J(e),Z=e[16]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=c("div"),a=c("div"),j&&j.c(),i=o(),N&&N.c(),s=o(),n=c("div"),y=c("h1"),k=l(e[0]),M=o(),T&&T.c(),z=o(),L&&L.c(),A=o(),B&&B.c(),v=o(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,W),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,c){r(d,t,c),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[28](t),S=!0},p(e,r){e[5]?j?(j.p(e,r),32&r[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[14]?N?N.p(e,r):(N=C(e),N.c(),N.m(a,s)):N&&(N.d(1),N=null),(!S||1&r[0])&&x(k,e[0]),e[1]?T?T.p(e,r):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,r),8&r[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[9]?B&&(B.d(1),B=null):B?B.p(e,r):(B=J(e),B.c(),B.m(t,v)),e[16]?Z?(Z.p(e,r),65536&r[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),b(t,W=$(R,[(!S||4&r[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},1024&r[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[28](null)}}}function W(e,t,a){let i,r,s,n,c,o;const l=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,l),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{nopaddingbreadcrumb:T}=t,{hasicons:L}=t,{hasselector:E}=t,{hideoptions:C=!1}=t,O=new j,H=0;function J(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));H>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),H=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(32,m=y(t,l)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(22,v=e.tabs),"noshadow"in e&&a(23,D=e.noshadow),"a11ylabels"in e&&a(24,I=e.a11ylabels),"scrollcontainer"in e&&a(25,N=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,T=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,L=e.hasicons),"hasselector"in e&&a(8,E=e.hasselector),"hideoptions"in e&&a(9,C=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,i="string"==typeof A?JSON.parse(A):A),4194304&e.$$.dirty[0]&&a(16,r="string"==typeof v?JSON.parse(v):v),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof I?JSON.parse(I):I),2097152&e.$$.dirty[0]&&a(14,n=z&&"false"!==z),8388608&e.$$.dirty[0]&&a(13,c=D&&"false"!==D),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",J),e.addEventListener("scroll",J))}(N)),a(10,o=Object.assign({},m)),1024&e.$$.dirty[0]&&delete o.class},[_,f,x,$,w,A,T,L,E,C,o,p,u,c,n,s,r,i,O,function(){O.dispatch("on-back-click",{})},g,z,v,D,I,N,e=>O.dispatch("link-clicked",e.detail),e=>O.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"Roboto", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:700;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n export let nopaddingbreadcrumb: boolean;\n export let hasicons: boolean;\n export let hasselector: boolean;\n export let hideoptions = false;\n\n const headerAnimationThreshold = 5;\n\n let eventHandler = new EventHandler();\n let originalScrollPos = 0;\n let hasAnimation: boolean;\n let root: HTMLElement;\n\n $: parsedBreadcrumb =\n typeof breadcrumb === 'string'\n ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n : breadcrumb;\n\n $: parsedTabs =\n typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n $: parsedA11yLabels =\n typeof a11ylabels === 'string'\n ? (JSON.parse(a11ylabels) as A11yLabels)\n : a11ylabels;\n\n $: hasBack = back && back !== 'false';\n $: hasNoShadow = noshadow && noshadow !== 'false';\n $: {\n hasAnimation = Boolean(scrollcontainer);\n updateAnimation(scrollcontainer);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function goBack() {\n eventHandler.dispatch('on-back-click', {});\n }\n\n function updateAnimation(element: HTMLElement) {\n if (element) {\n element.removeEventListener('scroll', handleScroll);\n element.addEventListener('scroll', handleScroll);\n }\n }\n\n function handleScroll() {\n const currentScrollPos = scrollcontainer.scrollTop;\n const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n if (originalScrollPos > currentScrollPos) {\n // scroll up\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n root.style.marginTop = `${Math.max(\n -currentScrollPos,\n originHeaderMargin,\n )}px`;\n } else {\n // scroll while below header zone\n root.style.marginTop = '0';\n }\n } else {\n // scroll down\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n\n root.style.transition = 'none';\n root.style.marginTop = `${-currentScrollPos}px`;\n } else {\n // scroll while below header zone\n root.style.transition = 'margin-top ease-out 0.4s';\n root.style.marginTop = `${\n -root.offsetHeight - headerAnimationThreshold\n }px`;\n }\n }\n\n originalScrollPos = currentScrollPos;\n }\n</script>\n\n<div\n class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n class:mc-header--no-shadow={hasNoShadow}\n class:mc-header--animate={hasAnimation}\n bind:this={root}\n {...attributes}\n>\n <div class=\"mc-header__left\">\n {#if breadcrumb}\n <div class=\"mc-header__breadcrumb\">\n <Breadcrumb\n items={JSON.stringify(parsedBreadcrumb)}\n nopadding={nopaddingbreadcrumb}\n on:link-clicked={(event) =>\n eventHandler.dispatch('link-clicked', event.detail)}\n />\n </div>\n {/if}\n\n {#if hasBack}\n <button class=\"mc-header__back\" on:click={goBack}>\n <span class=\"mc-header__back__label\">\n {parsedA11yLabels?.['back'] || 'Back'}\n </span>\n </button>\n {/if}\n\n <div class=\"mc-header__heading\">\n <h1 class=\"mc-header__heading__title\">\n {title}\n </h1>\n {#if subtitle}\n <div class=\"mc-header__heading__subtitle\">\n {subtitle}\n </div>\n {/if}\n {#if status}\n <div class=\"mc-header__heading__status\">\n <Badge label={status} type={statustype} />\n </div>\n {/if}\n </div>\n </div>\n {#if !hideoptions}\n <div class=\"mc-header__right\">\n {#if $$slots?.icons || hasicons}\n <div class=\"mc-header__icons\">\n <slot name=\"icons\" />\n </div>\n {/if}\n {#if $$slots?.selector || hasselector}\n <div\n class:mc-header__selector--show-separator={($$slots?.icons ||\n hasicons) &&\n ($$slots?.selector || hasselector)}\n class=\"mc-header__selector\"\n >\n <slot name=\"selector\" />\n </div>\n {/if}\n </div>\n {/if}\n {#if parsedTabs}\n <div class=\"mc-header__tabs\">\n <Tabs\n tabs={JSON.stringify(parsedTabs)}\n nodivider={true}\n on:tab-clicked={(event) =>\n eventHandler.dispatch('tab-clicked', event.detail)}\n />\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.header.scss';\n\n :host {\n display: block;\n line-height: 0;\n }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"6dAkHiBA,KAAKC,UAAUC,EAAgB,eAC3BA,EAAmB,gHAHlCC,EAOKC,EAAAC,EAAAC,6DALMN,KAAKC,UAAUC,EAAgB,4BAC3BA,EAAmB,mIAU7BA,EAAgB,KAAS,MAAK,QAAM,4HAFzCC,EAIQC,EAAAG,EAAAD,GAHNE,EAEMD,EAAAE,4BAHkCP,EAAM,uCAE3CA,EAAgB,KAAS,MAAK,QAAM,KAAAQ,EAAAC,EAAAC,4EAWpCV,EAAQ,wDADXC,EAEKC,EAAAC,EAAAC,8BADFJ,EAAQ,yEAKKA,EAAM,QAAQA,EAAU,yFADxCC,EAEKC,EAAAC,EAAAC,wDADWJ,EAAM,qBAAQA,EAAU,6HAOrCA,EAAO,KAAEW,OAASX,EAAQ,KAAAY,OAK1BZ,EAAO,KAAEa,UAAYb,EAAW,KAAAc,EAAAd,yFANvCC,EAgBKC,EAAAC,EAAAC,gDAfEJ,EAAO,KAAEW,OAASX,EAAQ,gDAK1BA,EAAO,KAAEa,UAAYb,EAAW,yNAJnCC,EAEKC,EAAAC,EAAAC,uLAIyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,aAHrCC,EAOKC,EAAAC,EAAAC,oEANyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,yEAW/BF,KAAKC,UAAUC,EAAU,gBACpB,wGAHfC,EAOKC,EAAAC,EAAAC,2DALKN,KAAKC,UAAUC,EAAU,oJAzD9BA,EAAU,IAAAe,EAAAf,KAWVA,EAAO,KAAAgB,EAAAhB,KAYLA,EAAQ,IAAAiB,EAAAjB,KAKRA,EAAM,IAAAkB,EAAAlB,MAOTA,EAAW,IAAAmB,EAAAnB,KAmBZA,EAAU,KAAAoB,EAAApB,6BA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,KAI5CA,EAAU,0IAwBPA,EAAK,qNA3BgBA,EAAW,8BACbA,EAAY,aAHxCC,EAwEKC,EAAAmB,EAAAjB,GAjEHE,EAmCKe,EAAAC,+CAfHhB,EAcKgB,EAAAC,GAbHjB,EAEIiB,EAAAC,wHAtBDxB,EAAU,oGAWVA,EAAO,4EAUPA,EAAK,IAEHA,EAAQ,yDAKRA,EAAM,sGAOTA,EAAW,yDAmBZA,EAAU,wJA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,OAAE,CAAAyB,MAAAC,cAI9C1B,EAAU,kCAHcA,EAAW,8BACbA,EAAY,uaA1ElC2B,EACAC,SArBOC,GAAaC,YACbC,GAAgBD,GAChBE,KAAAA,EAAmB,KAAGF,UACtBG,GAAcH,cACdI,GAAqBJ,QACrBK,GAAsBL,cACtBM,GAAsCN,QACtCO,GAA0BP,YAC1BQ,GAA0BR,cAC1BS,GAA+BT,mBAC/BU,GAA4BV,uBAC5BW,GAA4BX,YAC5BY,GAAiBZ,eACjBa,GAAoBb,GACpBc,YAAAA,GAAc,GAAKd,EAI1Be,MAAmBC,EACnBC,EAAoB,WAoCfC,UACDC,EAAmBT,EAAgBU,UACnCC,EAAqBC,OAAOxB,EAAKyB,MAAMC,UAAUC,QAAQ,KAAM,KAEjER,EAAoBE,EAElBA,EAAmBrB,EAAK4B,kBAE1B5B,EAAKyB,MAAMC,UAAS,GAAMG,KAAKC,KAC5BT,EACDE,OAAkBvB,GAIpB+B,EAAA,GAAA/B,EAAKyB,MAAMC,UAAY,IAAG1B,GAIxBqB,EAAmBrB,EAAK4B,cAG1BG,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,OAAMhC,GAC9B+B,EAAA,GAAA/B,EAAKyB,MAAMC,WAAgBL,OAAgBrB,KAG3C+B,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,2BAA0BhC,QAClDA,EAAKyB,MAAMC,WACR1B,EAAK4B,aAlEmB,OAmE3B5B,IAIJmB,EAAoBE,unBAhEnBU,EAAA,GAAAE,EACqB,iBAAfzB,EACFtC,KAAKgE,MAAM1B,GACZA,0BAEHuB,EAAA,GAAAI,EACe,iBAAT1B,EAAqBvC,KAAKgE,MAAMzB,GAAwBA,2BAE9DsB,EAAA,GAAAK,EACqB,iBAAfzB,EACFzC,KAAKgE,MAAMvB,GACZA,+BAEH0B,EAAU9B,GAAiB,UAATA,+BAClB+B,EAAc5B,GAAyB,UAAbA,iCAE3BX,EAAewC,QAAQ3B,IAShB,SAAgB4B,GACnBA,IACFA,EAAQC,oBAAoB,SAAUrB,GACtCoB,EAAQE,iBAAiB,SAAUtB,IAXrCuB,CAAgB/B,SAEfgC,EAALC,OAAAC,UAAuBC,+BACXH,EAAW/C,yDAEnBoB,EAAa+B,SAAS,gBAAe,CAAA,gBA2DbC,GAChBhC,EAAa+B,SAAS,eAAgBC,EAAMC,QAqD/BD,GACfhC,EAAa+B,SAAS,cAAeC,EAAMC,gDAhExClD,EAAImD"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
export let noshadow: boolean | string;
|
|
22
22
|
export let a11ylabels: string | A11yLabels;
|
|
23
23
|
export let scrollcontainer: HTMLElement;
|
|
24
|
-
|
|
24
|
+
export let nopaddingbreadcrumb: boolean;
|
|
25
25
|
export let hasicons: boolean;
|
|
26
26
|
export let hasselector: boolean;
|
|
27
27
|
export let hideoptions = false;
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<div class="mc-header__breadcrumb">
|
|
114
114
|
<Breadcrumb
|
|
115
115
|
items={JSON.stringify(parsedBreadcrumb)}
|
|
116
|
-
nopadding=
|
|
116
|
+
nopadding={nopaddingbreadcrumb}
|
|
117
117
|
on:link-clicked={(event) =>
|
|
118
118
|
eventHandler.dispatch('link-clicked', event.detail)}
|
|
119
119
|
/>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#ffffff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#ffffff}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#405d68}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#ffffff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#ffffff}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#405d68}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a,_ as i,b as s,f as r,s as n,c as d,e as l,d as c,t as o,n as m,g as h,h as g,z as b,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[16]),nopadding:"true"}}),a.$on("link-clicked",e[25]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.items=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,r,n,d=(e[14]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){s(d,t,l),p(t,a),p(a,i),r||(n=D(t,"click",e[18]),r=!0)},p(e,t){16384&t[0]&&d!==(d=(e[14]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),r=!1,n()}}}function O(e){let t,a;return{c(){t=l("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){s(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[19]?.icons||e[6])&&B(),r=(e[19]?.selector||e[7])&&Z(e);return{c(){t=l("div"),i&&i.c(),a=c(),r&&r.c(),h(t,"class","mc-header__right")},m(e,n){s(e,t,n),i&&i.m(t,null),p(t,a),r&&r.m(t,null)},p(e,s){e[19]?.icons||e[6]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[19]?.selector||e[7]?r?r.p(e,s):(r=Z(e),r.c(),r.m(t,null)):r&&(r.d(1),r=null)},d(e){e&&w(t),i&&i.d(),r&&r.d()}}}function B(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){s(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},m(e,a){s(e,t,a)},p(e,a){524480&a[0]&&b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[15]),nodivider:!0}}),a.$on("tab-clicked",e[26]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};32768&t[0]&&(i.tabs=JSON.stringify(e[15])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,r,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[13]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[8]&&J(e),Z=e[15]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[9]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=l("div"),a=l("div"),j&&j.c(),i=c(),N&&N.c(),r=c(),n=l("div"),y=l("h1"),k=o(e[0]),M=c(),T&&T.c(),z=c(),L&&L.c(),A=c(),B&&B.c(),v=c(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),g(t,W),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},m(d,l){s(d,t,l),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,r),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[27](t),S=!0},p(e,s){e[5]?j?(j.p(e,s),32&s[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[13]?N?N.p(e,s):(N=C(e),N.c(),N.m(a,r)):N&&(N.d(1),N=null),(!S||1&s[0])&&x(k,e[0]),e[1]?T?T.p(e,s):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,s),8&s[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[8]?B&&(B.d(1),B=null):B?B.p(e,s):(B=J(e),B.c(),B.m(t,v)),e[15]?Z?(Z.p(e,s),32768&s[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),g(t,W=$(R,[(!S||4&s[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},512&s[0]&&e[9]])),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[27](null)}}}function W(e,t,a){let i,s,r,n,l,c;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:g}=t;const b=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{hasicons:T}=t,{hasselector:L}=t,{hideoptions:E=!1}=t,C=new j,O=0;function H(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));O>e?e<u.offsetHeight?a(11,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(11,u.style.marginTop="0",u):e<u.offsetHeight?(a(11,u.style.transition="none",u),a(11,u.style.marginTop=-e+"px",u)):(a(11,u.style.transition="margin-top ease-out 0.4s",u),a(11,u.style.marginTop=-u.offsetHeight-5+"px",u)),O=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(31,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(20,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(21,v=e.tabs),"noshadow"in e&&a(22,D=e.noshadow),"a11ylabels"in e&&a(23,I=e.a11ylabels),"scrollcontainer"in e&&a(24,N=e.scrollcontainer),"hasicons"in e&&a(6,T=e.hasicons),"hasselector"in e&&a(7,L=e.hasselector),"hideoptions"in e&&a(8,E=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(16,i="string"==typeof A?JSON.parse(A):A),2097152&e.$$.dirty[0]&&a(15,s="string"==typeof v?JSON.parse(v):v),8388608&e.$$.dirty[0]&&a(14,r="string"==typeof I?JSON.parse(I):I),1048576&e.$$.dirty[0]&&a(13,n=z&&"false"!==z),4194304&e.$$.dirty[0]&&a(12,l=D&&"false"!==D),16777216&e.$$.dirty[0]&&(a(10,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",H),e.addEventListener("scroll",H))}(N)),a(9,c=Object.assign({},m)),512&e.$$.dirty[0]&&delete c.class},[_,f,x,$,w,A,T,L,E,c,p,u,l,n,r,s,i,C,function(){C.dispatch("on-back-click",{})},b,z,v,D,I,N,e=>C.dispatch("link-clicked",e.detail),e=>C.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(11,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.5rem;line-height:1.3333333333}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:20,breadcrumb:5,tabs:21,noshadow:22,a11ylabels:23,scrollcontainer:24,hasicons:6,hasselector:7,hideoptions:8},null,[-1,-1]),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),r()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),r()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),r()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),r()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),r()}get back(){return this.$$.ctx[20]}set back(e){this.$$set({back:e}),r()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),r()}get tabs(){return this.$$.ctx[21]}set tabs(e){this.$$set({tabs:e}),r()}get noshadow(){return this.$$.ctx[22]}set noshadow(e){this.$$set({noshadow:e}),r()}get a11ylabels(){return this.$$.ctx[23]}set a11ylabels(e){this.$$set({a11ylabels:e}),r()}get scrollcontainer(){return this.$$.ctx[24]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),r()}get hasicons(){return this.$$.ctx[6]}set hasicons(e){this.$$set({hasicons:e}),r()}get hasselector(){return this.$$.ctx[7]}set hasselector(e){this.$$set({hasselector:e}),r()}get hideoptions(){return this.$$.ctx[8]}set hideoptions(e){this.$$set({hideoptions:e}),r()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a,_ as i,b as r,f as s,s as n,c as d,e as c,d as l,t as o,n as m,g as h,h as b,z as g,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};131072&t[0]&&(i.items=JSON.stringify(e[17])),64&t[0]&&(i.nopadding=e[6]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=c("button"),a=c("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,c){r(d,t,c),p(t,a),p(a,i),s||(n=D(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),s=!1,n()}}}function O(e){let t,a;return{c(){t=c("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){r(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[20]?.icons||e[7])&&B(),s=(e[20]?.selector||e[8])&&Z(e);return{c(){t=c("div"),i&&i.c(),a=l(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){r(e,t,n),i&&i.m(t,null),p(t,a),s&&s.m(t,null)},p(e,r){e[20]?.icons||e[7]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[20]?.selector||e[8]?s?s.p(e,r):(s=Z(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),i&&i.d(),s&&s.d()}}}function B(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){r(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){r(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[16]),nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.tabs=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,s,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[14]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[9]&&J(e),Z=e[16]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=c("div"),a=c("div"),j&&j.c(),i=l(),N&&N.c(),s=l(),n=c("div"),y=c("h1"),k=o(e[0]),M=l(),T&&T.c(),z=l(),L&&L.c(),A=l(),B&&B.c(),v=l(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,W),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,c){r(d,t,c),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[28](t),S=!0},p(e,r){e[5]?j?(j.p(e,r),32&r[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[14]?N?N.p(e,r):(N=C(e),N.c(),N.m(a,s)):N&&(N.d(1),N=null),(!S||1&r[0])&&x(k,e[0]),e[1]?T?T.p(e,r):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,r),8&r[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[9]?B&&(B.d(1),B=null):B?B.p(e,r):(B=J(e),B.c(),B.m(t,v)),e[16]?Z?(Z.p(e,r),65536&r[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),b(t,W=$(R,[(!S||4&r[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},1024&r[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[28](null)}}}function W(e,t,a){let i,r,s,n,c,l;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{nopaddingbreadcrumb:T}=t,{hasicons:L}=t,{hasselector:E}=t,{hideoptions:C=!1}=t,O=new j,H=0;function J(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));H>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),H=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(32,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(22,v=e.tabs),"noshadow"in e&&a(23,D=e.noshadow),"a11ylabels"in e&&a(24,I=e.a11ylabels),"scrollcontainer"in e&&a(25,N=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,T=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,L=e.hasicons),"hasselector"in e&&a(8,E=e.hasselector),"hideoptions"in e&&a(9,C=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,i="string"==typeof A?JSON.parse(A):A),4194304&e.$$.dirty[0]&&a(16,r="string"==typeof v?JSON.parse(v):v),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof I?JSON.parse(I):I),2097152&e.$$.dirty[0]&&a(14,n=z&&"false"!==z),8388608&e.$$.dirty[0]&&a(13,c=D&&"false"!==D),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",J),e.addEventListener("scroll",J))}(N)),a(10,l=Object.assign({},m)),1024&e.$$.dirty[0]&&delete l.class},[_,f,x,$,w,A,T,L,E,C,l,p,u,c,n,s,r,i,O,function(){O.dispatch("on-back-click",{})},g,z,v,D,I,N,e=>O.dispatch("link-clicked",e.detail),e=>O.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.5rem;line-height:1.3333333333}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n export let nopaddingbreadcrumb: boolean;\n export let hasicons: boolean;\n export let hasselector: boolean;\n export let hideoptions = false;\n\n const headerAnimationThreshold = 5;\n\n let eventHandler = new EventHandler();\n let originalScrollPos = 0;\n let hasAnimation: boolean;\n let root: HTMLElement;\n\n $: parsedBreadcrumb =\n typeof breadcrumb === 'string'\n ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n : breadcrumb;\n\n $: parsedTabs =\n typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n $: parsedA11yLabels =\n typeof a11ylabels === 'string'\n ? (JSON.parse(a11ylabels) as A11yLabels)\n : a11ylabels;\n\n $: hasBack = back && back !== 'false';\n $: hasNoShadow = noshadow && noshadow !== 'false';\n $: {\n hasAnimation = Boolean(scrollcontainer);\n updateAnimation(scrollcontainer);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function goBack() {\n eventHandler.dispatch('on-back-click', {});\n }\n\n function updateAnimation(element: HTMLElement) {\n if (element) {\n element.removeEventListener('scroll', handleScroll);\n element.addEventListener('scroll', handleScroll);\n }\n }\n\n function handleScroll() {\n const currentScrollPos = scrollcontainer.scrollTop;\n const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n if (originalScrollPos > currentScrollPos) {\n // scroll up\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n root.style.marginTop = `${Math.max(\n -currentScrollPos,\n originHeaderMargin,\n )}px`;\n } else {\n // scroll while below header zone\n root.style.marginTop = '0';\n }\n } else {\n // scroll down\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n\n root.style.transition = 'none';\n root.style.marginTop = `${-currentScrollPos}px`;\n } else {\n // scroll while below header zone\n root.style.transition = 'margin-top ease-out 0.4s';\n root.style.marginTop = `${\n -root.offsetHeight - headerAnimationThreshold\n }px`;\n }\n }\n\n originalScrollPos = currentScrollPos;\n }\n</script>\n\n<div\n class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n class:mc-header--no-shadow={hasNoShadow}\n class:mc-header--animate={hasAnimation}\n bind:this={root}\n {...attributes}\n>\n <div class=\"mc-header__left\">\n {#if breadcrumb}\n <div class=\"mc-header__breadcrumb\">\n <Breadcrumb\n items={JSON.stringify(parsedBreadcrumb)}\n nopadding={nopaddingbreadcrumb}\n on:link-clicked={(event) =>\n eventHandler.dispatch('link-clicked', event.detail)}\n />\n </div>\n {/if}\n\n {#if hasBack}\n <button class=\"mc-header__back\" on:click={goBack}>\n <span class=\"mc-header__back__label\">\n {parsedA11yLabels?.['back'] || 'Back'}\n </span>\n </button>\n {/if}\n\n <div class=\"mc-header__heading\">\n <h1 class=\"mc-header__heading__title\">\n {title}\n </h1>\n {#if subtitle}\n <div class=\"mc-header__heading__subtitle\">\n {subtitle}\n </div>\n {/if}\n {#if status}\n <div class=\"mc-header__heading__status\">\n <Badge label={status} type={statustype} />\n </div>\n {/if}\n </div>\n </div>\n {#if !hideoptions}\n <div class=\"mc-header__right\">\n {#if $$slots?.icons || hasicons}\n <div class=\"mc-header__icons\">\n <slot name=\"icons\" />\n </div>\n {/if}\n {#if $$slots?.selector || hasselector}\n <div\n class:mc-header__selector--show-separator={($$slots?.icons ||\n hasicons) &&\n ($$slots?.selector || hasselector)}\n class=\"mc-header__selector\"\n >\n <slot name=\"selector\" />\n </div>\n {/if}\n </div>\n {/if}\n {#if parsedTabs}\n <div class=\"mc-header__tabs\">\n <Tabs\n tabs={JSON.stringify(parsedTabs)}\n nodivider={true}\n on:tab-clicked={(event) =>\n eventHandler.dispatch('tab-clicked', event.detail)}\n />\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.header.scss';\n\n :host {\n display: block;\n line-height: 0;\n }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"6dAkHiBA,KAAKC,UAAUC,EAAgB,eAC3BA,EAAmB,gHAHlCC,EAOKC,EAAAC,EAAAC,6DALMN,KAAKC,UAAUC,EAAgB,4BAC3BA,EAAmB,mIAU7BA,EAAgB,KAAS,MAAK,QAAM,4HAFzCC,EAIQC,EAAAG,EAAAD,GAHNE,EAEMD,EAAAE,4BAHkCP,EAAM,uCAE3CA,EAAgB,KAAS,MAAK,QAAM,KAAAQ,EAAAC,EAAAC,4EAWpCV,EAAQ,wDADXC,EAEKC,EAAAC,EAAAC,8BADFJ,EAAQ,yEAKKA,EAAM,QAAQA,EAAU,yFADxCC,EAEKC,EAAAC,EAAAC,wDADWJ,EAAM,qBAAQA,EAAU,6HAOrCA,EAAO,KAAEW,OAASX,EAAQ,KAAAY,OAK1BZ,EAAO,KAAEa,UAAYb,EAAW,KAAAc,EAAAd,yFANvCC,EAgBKC,EAAAC,EAAAC,gDAfEJ,EAAO,KAAEW,OAASX,EAAQ,gDAK1BA,EAAO,KAAEa,UAAYb,EAAW,yNAJnCC,EAEKC,EAAAC,EAAAC,uLAIyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,aAHrCC,EAOKC,EAAAC,EAAAC,oEANyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,yEAW/BF,KAAKC,UAAUC,EAAU,gBACpB,wGAHfC,EAOKC,EAAAC,EAAAC,2DALKN,KAAKC,UAAUC,EAAU,oJAzD9BA,EAAU,IAAAe,EAAAf,KAWVA,EAAO,KAAAgB,EAAAhB,KAYLA,EAAQ,IAAAiB,EAAAjB,KAKRA,EAAM,IAAAkB,EAAAlB,MAOTA,EAAW,IAAAmB,EAAAnB,KAmBZA,EAAU,KAAAoB,EAAApB,6BA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,KAI5CA,EAAU,0IAwBPA,EAAK,qNA3BgBA,EAAW,8BACbA,EAAY,aAHxCC,EAwEKC,EAAAmB,EAAAjB,GAjEHE,EAmCKe,EAAAC,+CAfHhB,EAcKgB,EAAAC,GAbHjB,EAEIiB,EAAAC,wHAtBDxB,EAAU,oGAWVA,EAAO,4EAUPA,EAAK,IAEHA,EAAQ,yDAKRA,EAAM,sGAOTA,EAAW,yDAmBZA,EAAU,wJA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,OAAE,CAAAyB,MAAAC,cAI9C1B,EAAU,kCAHcA,EAAW,8BACbA,EAAY,uaA1ElC2B,EACAC,SArBOC,GAAaC,YACbC,GAAgBD,GAChBE,KAAAA,EAAmB,KAAGF,UACtBG,GAAcH,cACdI,GAAqBJ,QACrBK,GAAsBL,cACtBM,GAAsCN,QACtCO,GAA0BP,YAC1BQ,GAA0BR,cAC1BS,GAA+BT,mBAC/BU,GAA4BV,uBAC5BW,GAA4BX,YAC5BY,GAAiBZ,eACjBa,GAAoBb,GACpBc,YAAAA,GAAc,GAAKd,EAI1Be,MAAmBC,EACnBC,EAAoB,WAoCfC,UACDC,EAAmBT,EAAgBU,UACnCC,EAAqBC,OAAOxB,EAAKyB,MAAMC,UAAUC,QAAQ,KAAM,KAEjER,EAAoBE,EAElBA,EAAmBrB,EAAK4B,kBAE1B5B,EAAKyB,MAAMC,UAAS,GAAMG,KAAKC,KAC5BT,EACDE,OAAkBvB,GAIpB+B,EAAA,GAAA/B,EAAKyB,MAAMC,UAAY,IAAG1B,GAIxBqB,EAAmBrB,EAAK4B,cAG1BG,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,OAAMhC,GAC9B+B,EAAA,GAAA/B,EAAKyB,MAAMC,WAAgBL,OAAgBrB,KAG3C+B,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,2BAA0BhC,QAClDA,EAAKyB,MAAMC,WACR1B,EAAK4B,aAlEmB,OAmE3B5B,IAIJmB,EAAoBE,unBAhEnBU,EAAA,GAAAE,EACqB,iBAAfzB,EACFtC,KAAKgE,MAAM1B,GACZA,0BAEHuB,EAAA,GAAAI,EACe,iBAAT1B,EAAqBvC,KAAKgE,MAAMzB,GAAwBA,2BAE9DsB,EAAA,GAAAK,EACqB,iBAAfzB,EACFzC,KAAKgE,MAAMvB,GACZA,+BAEH0B,EAAU9B,GAAiB,UAATA,+BAClB+B,EAAc5B,GAAyB,UAAbA,iCAE3BX,EAAewC,QAAQ3B,IAShB,SAAgB4B,GACnBA,IACFA,EAAQC,oBAAoB,SAAUrB,GACtCoB,EAAQE,iBAAiB,SAAUtB,IAXrCuB,CAAgB/B,SAEfgC,EAALC,OAAAC,UAAuBC,+BACXH,EAAW/C,yDAEnBoB,EAAa+B,SAAS,gBAAe,CAAA,gBA2DbC,GAChBhC,EAAa+B,SAAS,eAAgBC,EAAMC,QAqD/BD,GACfhC,EAAa+B,SAAS,cAAeC,EAAMC,gDAhExClD,EAAImD"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
export let noshadow: boolean | string;
|
|
22
22
|
export let a11ylabels: string | A11yLabels;
|
|
23
23
|
export let scrollcontainer: HTMLElement;
|
|
24
|
-
|
|
24
|
+
export let nopaddingbreadcrumb: boolean;
|
|
25
25
|
export let hasicons: boolean;
|
|
26
26
|
export let hasselector: boolean;
|
|
27
27
|
export let hideoptions = false;
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<div class="mc-header__breadcrumb">
|
|
114
114
|
<Breadcrumb
|
|
115
115
|
items={JSON.stringify(parsedBreadcrumb)}
|
|
116
|
-
nopadding=
|
|
116
|
+
nopadding={nopaddingbreadcrumb}
|
|
117
117
|
on:link-clicked={(event) =>
|
|
118
118
|
eventHandler.dispatch('link-clicked', event.detail)}
|
|
119
119
|
/>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#ffe1d1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#ff7933}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#ffe1d1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#ff7933}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a,_ as i,b as s,f as r,s as n,c as d,e as l,d as c,t as o,n as m,g as h,h as g,z as b,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[16]),nopadding:"true"}}),a.$on("link-clicked",e[25]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.items=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,r,n,d=(e[14]?.back||"Back")+"";return{c(){t=l("button"),a=l("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,l){s(d,t,l),p(t,a),p(a,i),r||(n=D(t,"click",e[18]),r=!0)},p(e,t){16384&t[0]&&d!==(d=(e[14]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),r=!1,n()}}}function O(e){let t,a;return{c(){t=l("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){s(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[19]?.icons||e[6])&&B(),r=(e[19]?.selector||e[7])&&Z(e);return{c(){t=l("div"),i&&i.c(),a=c(),r&&r.c(),h(t,"class","mc-header__right")},m(e,n){s(e,t,n),i&&i.m(t,null),p(t,a),r&&r.m(t,null)},p(e,s){e[19]?.icons||e[6]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[19]?.selector||e[7]?r?r.p(e,s):(r=Z(e),r.c(),r.m(t,null)):r&&(r.d(1),r=null)},d(e){e&&w(t),i&&i.d(),r&&r.d()}}}function B(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){s(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=l("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},m(e,a){s(e,t,a)},p(e,a){524480&a[0]&&b(t,"mc-header__selector--show-separator",(e[19]?.icons||e[6])&&(e[19]?.selector||e[7]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[15]),nodivider:!0}}),a.$on("tab-clicked",e[26]),{c(){t=l("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,r){s(e,t,r),A(a,t,null),i=!0},p(e,t){const i={};32768&t[0]&&(i.tabs=JSON.stringify(e[15])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,r,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[13]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[8]&&J(e),Z=e[15]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[9]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=l("div"),a=l("div"),j&&j.c(),i=c(),N&&N.c(),r=c(),n=l("div"),y=l("h1"),k=o(e[0]),M=c(),T&&T.c(),z=c(),L&&L.c(),A=c(),B&&B.c(),v=c(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),g(t,W),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},m(d,l){s(d,t,l),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,r),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[27](t),S=!0},p(e,s){e[5]?j?(j.p(e,s),32&s[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[13]?N?N.p(e,s):(N=C(e),N.c(),N.m(a,r)):N&&(N.d(1),N=null),(!S||1&s[0])&&x(k,e[0]),e[1]?T?T.p(e,s):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,s),8&s[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[8]?B&&(B.d(1),B=null):B?B.p(e,s):(B=J(e),B.c(),B.m(t,v)),e[15]?Z?(Z.p(e,s),32768&s[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),g(t,W=$(R,[(!S||4&s[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},512&s[0]&&e[9]])),b(t,"mc-header--no-shadow",e[12]),b(t,"mc-header--animate",e[10])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[27](null)}}}function W(e,t,a){let i,s,r,n,l,c;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:g}=t;const b=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{hasicons:T}=t,{hasselector:L}=t,{hideoptions:E=!1}=t,C=new j,O=0;function H(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));O>e?e<u.offsetHeight?a(11,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(11,u.style.marginTop="0",u):e<u.offsetHeight?(a(11,u.style.transition="none",u),a(11,u.style.marginTop=-e+"px",u)):(a(11,u.style.transition="margin-top ease-out 0.4s",u),a(11,u.style.marginTop=-u.offsetHeight-5+"px",u)),O=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(31,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(20,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(21,v=e.tabs),"noshadow"in e&&a(22,D=e.noshadow),"a11ylabels"in e&&a(23,I=e.a11ylabels),"scrollcontainer"in e&&a(24,N=e.scrollcontainer),"hasicons"in e&&a(6,T=e.hasicons),"hasselector"in e&&a(7,L=e.hasselector),"hideoptions"in e&&a(8,E=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(16,i="string"==typeof A?JSON.parse(A):A),2097152&e.$$.dirty[0]&&a(15,s="string"==typeof v?JSON.parse(v):v),8388608&e.$$.dirty[0]&&a(14,r="string"==typeof I?JSON.parse(I):I),1048576&e.$$.dirty[0]&&a(13,n=z&&"false"!==z),4194304&e.$$.dirty[0]&&a(12,l=D&&"false"!==D),16777216&e.$$.dirty[0]&&(a(10,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",H),e.addEventListener("scroll",H))}(N)),a(9,c=Object.assign({},m)),512&e.$$.dirty[0]&&delete c.class},[_,f,x,$,w,A,T,L,E,c,p,u,l,n,r,s,i,C,function(){C.dispatch("on-back-click",{})},b,z,v,D,I,N,e=>C.dispatch("link-clicked",e.detail),e=>C.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(11,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:20,breadcrumb:5,tabs:21,noshadow:22,a11ylabels:23,scrollcontainer:24,hasicons:6,hasselector:7,hideoptions:8},null,[-1,-1]),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),r()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),r()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),r()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),r()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),r()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),r()}get back(){return this.$$.ctx[20]}set back(e){this.$$set({back:e}),r()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),r()}get tabs(){return this.$$.ctx[21]}set tabs(e){this.$$set({tabs:e}),r()}get noshadow(){return this.$$.ctx[22]}set noshadow(e){this.$$set({noshadow:e}),r()}get a11ylabels(){return this.$$.ctx[23]}set a11ylabels(e){this.$$set({a11ylabels:e}),r()}get scrollcontainer(){return this.$$.ctx[24]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),r()}get hasicons(){return this.$$.ctx[6]}set hasicons(e){this.$$set({hasicons:e}),r()}get hasselector(){return this.$$.ctx[7]}set hasselector(e){this.$$set({hasselector:e}),r()}get hideoptions(){return this.$$.ctx[8]}set hideoptions(e){this.$$set({hideoptions:e}),r()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a,_ as i,b as r,f as s,s as n,c as d,e as c,d as l,t as o,n as m,g as h,h as b,z as g,j as p,C as u,D as _,E as f,k as x,m as $,o as w,p as y,a0 as k,q as M,x as z,A,G as v,l as D,M as I,v as S}from"../../index-c33b3772.js";import{E as j}from"../../EventHandler-02058705.js";import N from"../breadcrumb/Breadcrumb.nested.js";import T from"../tabs/Tabs.nested.js";import L from"../badge/Badge.nested.js";function E(e){let t,a,i;return a=new N({props:{items:JSON.stringify(e[17]),nopadding:e[6]}}),a.$on("link-clicked",e[26]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__breadcrumb")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};131072&t[0]&&(i.items=JSON.stringify(e[17])),64&t[0]&&(i.nopadding=e[6]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function C(e){let t,a,i,s,n,d=(e[15]?.back||"Back")+"";return{c(){t=c("button"),a=c("span"),i=o(d),h(a,"class","mc-header__back__label"),h(t,"class","mc-header__back")},m(d,c){r(d,t,c),p(t,a),p(a,i),s||(n=D(t,"click",e[19]),s=!0)},p(e,t){32768&t[0]&&d!==(d=(e[15]?.back||"Back")+"")&&x(i,d)},d(e){e&&w(t),s=!1,n()}}}function O(e){let t,a;return{c(){t=c("div"),a=o(e[1]),h(t,"class","mc-header__heading__subtitle")},m(e,i){r(e,t,i),p(t,a)},p(e,t){2&t[0]&&x(a,e[1])},d(e){e&&w(t)}}}function H(e){let t,a,i;return a=new L({props:{label:e[3],type:e[4]}}),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__heading__status")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};8&t[0]&&(i.label=e[3]),16&t[0]&&(i.type=e[4]),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function J(e){let t,a,i=(e[20]?.icons||e[7])&&B(),s=(e[20]?.selector||e[8])&&Z(e);return{c(){t=c("div"),i&&i.c(),a=l(),s&&s.c(),h(t,"class","mc-header__right")},m(e,n){r(e,t,n),i&&i.m(t,null),p(t,a),s&&s.m(t,null)},p(e,r){e[20]?.icons||e[7]?i||(i=B(),i.c(),i.m(t,a)):i&&(i.d(1),i=null),e[20]?.selector||e[8]?s?s.p(e,r):(s=Z(e),s.c(),s.m(t,null)):s&&(s.d(1),s=null)},d(e){e&&w(t),i&&i.d(),s&&s.d()}}}function B(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="icons"></slot>',h(t,"class","mc-header__icons")},m(e,a){r(e,t,a)},d(e){e&&w(t)}}}function Z(e){let t;return{c(){t=c("div"),t.innerHTML='<slot name="selector"></slot>',h(t,"class","mc-header__selector"),g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},m(e,a){r(e,t,a)},p(e,a){1048960&a[0]&&g(t,"mc-header__selector--show-separator",(e[20]?.icons||e[7])&&(e[20]?.selector||e[8]))},d(e){e&&w(t)}}}function G(e){let t,a,i;return a=new T({props:{tabs:JSON.stringify(e[16]),nodivider:!0}}),a.$on("tab-clicked",e[27]),{c(){t=c("div"),z(a.$$.fragment),h(t,"class","mc-header__tabs")},m(e,s){r(e,t,s),A(a,t,null),i=!0},p(e,t){const i={};65536&t[0]&&(i.tabs=JSON.stringify(e[16])),a.$set(i)},i(e){i||(u(a.$$.fragment,e),i=!0)},o(e){_(a.$$.fragment,e),i=!1},d(e){e&&w(t),v(a)}}}function R(e){let t,a,i,s,n,y,k,M,z,A,v,D,S,j=e[5]&&E(e),N=e[14]&&C(e),T=e[1]&&O(e),L=e[3]&&H(e),B=!e[9]&&J(e),Z=e[16]&&G(e),R=[{class:D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")},e[10]],W={};for(let e=0;e<R.length;e+=1)W=d(W,R[e]);return{c(){t=c("div"),a=c("div"),j&&j.c(),i=l(),N&&N.c(),s=l(),n=c("div"),y=c("h1"),k=o(e[0]),M=l(),T&&T.c(),z=l(),L&&L.c(),A=l(),B&&B.c(),v=l(),Z&&Z.c(),this.c=m,h(y,"class","mc-header__heading__title"),h(n,"class","mc-header__heading"),h(a,"class","mc-header__left"),b(t,W),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},m(d,c){r(d,t,c),p(t,a),j&&j.m(a,null),p(a,i),N&&N.m(a,null),p(a,s),p(a,n),p(n,y),p(y,k),p(n,M),T&&T.m(n,null),p(n,z),L&&L.m(n,null),p(t,A),B&&B.m(t,null),p(t,v),Z&&Z.m(t,null),e[28](t),S=!0},p(e,r){e[5]?j?(j.p(e,r),32&r[0]&&u(j,1)):(j=E(e),j.c(),u(j,1),j.m(a,i)):j&&(I(),_(j,1,1,(()=>{j=null})),f()),e[14]?N?N.p(e,r):(N=C(e),N.c(),N.m(a,s)):N&&(N.d(1),N=null),(!S||1&r[0])&&x(k,e[0]),e[1]?T?T.p(e,r):(T=O(e),T.c(),T.m(n,z)):T&&(T.d(1),T=null),e[3]?L?(L.p(e,r),8&r[0]&&u(L,1)):(L=H(e),L.c(),u(L,1),L.m(n,null)):L&&(I(),_(L,1,1,(()=>{L=null})),f()),e[9]?B&&(B.d(1),B=null):B?B.p(e,r):(B=J(e),B.c(),B.m(t,v)),e[16]?Z?(Z.p(e,r),65536&r[0]&&u(Z,1)):(Z=G(e),Z.c(),u(Z,1),Z.m(t,null)):Z&&(I(),_(Z,1,1,(()=>{Z=null})),f()),b(t,W=$(R,[(!S||4&r[0]&&D!==(D="mc-header "+(e[2]?`mc-header--${e[2]}`:"")))&&{class:D},1024&r[0]&&e[10]])),g(t,"mc-header--no-shadow",e[13]),g(t,"mc-header--animate",e[11])},i(e){S||(u(j),u(L),u(Z),S=!0)},o(e){_(j),_(L),_(Z),S=!1},d(a){a&&w(t),j&&j.d(),N&&N.d(),T&&T.d(),L&&L.d(),B&&B.d(),Z&&Z.d(),e[28](null)}}}function W(e,t,a){let i,r,s,n,c,l;const o=["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"];let m=y(t,o),{$$slots:h={},$$scope:b}=t;const g=k(h);let p,u,{title:_}=t,{subtitle:f}=t,{size:x="m"}=t,{status:$}=t,{statustype:w}=t,{back:z}=t,{breadcrumb:A}=t,{tabs:v}=t,{noshadow:D}=t,{a11ylabels:I}=t,{scrollcontainer:N}=t,{nopaddingbreadcrumb:T}=t,{hasicons:L}=t,{hasselector:E}=t,{hideoptions:C=!1}=t,O=new j,H=0;function J(){const e=N.scrollTop,t=Number(u.style.marginTop.replace("px",""));H>e?e<u.offsetHeight?a(12,u.style.marginTop=`${Math.max(-e,t)}px`,u):a(12,u.style.marginTop="0",u):e<u.offsetHeight?(a(12,u.style.transition="none",u),a(12,u.style.marginTop=-e+"px",u)):(a(12,u.style.transition="margin-top ease-out 0.4s",u),a(12,u.style.marginTop=-u.offsetHeight-5+"px",u)),H=e}return e.$$set=e=>{t=d(d({},t),M(e)),a(32,m=y(t,o)),"title"in e&&a(0,_=e.title),"subtitle"in e&&a(1,f=e.subtitle),"size"in e&&a(2,x=e.size),"status"in e&&a(3,$=e.status),"statustype"in e&&a(4,w=e.statustype),"back"in e&&a(21,z=e.back),"breadcrumb"in e&&a(5,A=e.breadcrumb),"tabs"in e&&a(22,v=e.tabs),"noshadow"in e&&a(23,D=e.noshadow),"a11ylabels"in e&&a(24,I=e.a11ylabels),"scrollcontainer"in e&&a(25,N=e.scrollcontainer),"nopaddingbreadcrumb"in e&&a(6,T=e.nopaddingbreadcrumb),"hasicons"in e&&a(7,L=e.hasicons),"hasselector"in e&&a(8,E=e.hasselector),"hideoptions"in e&&a(9,C=e.hideoptions)},e.$$.update=()=>{32&e.$$.dirty[0]&&a(17,i="string"==typeof A?JSON.parse(A):A),4194304&e.$$.dirty[0]&&a(16,r="string"==typeof v?JSON.parse(v):v),16777216&e.$$.dirty[0]&&a(15,s="string"==typeof I?JSON.parse(I):I),2097152&e.$$.dirty[0]&&a(14,n=z&&"false"!==z),8388608&e.$$.dirty[0]&&a(13,c=D&&"false"!==D),33554432&e.$$.dirty[0]&&(a(11,p=Boolean(N)),function(e){e&&(e.removeEventListener("scroll",J),e.addEventListener("scroll",J))}(N)),a(10,l=Object.assign({},m)),1024&e.$$.dirty[0]&&delete l.class},[_,f,x,$,w,A,T,L,E,C,l,p,u,c,n,s,r,i,O,function(){O.dispatch("on-back-click",{})},g,z,v,D,I,N,e=>O.dispatch("link-clicked",e.detail),e=>O.dispatch("tab-clicked",e.detail),function(e){S[e?"unshift":"push"]((()=>{u=e,a(12,u)}))}]}class Y extends e{constructor(e){super();const d=document.createElement("style");d.textContent='.mc-header{background-color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 4px 5px rgba(0, 0, 0, 0.2);font-family:"LeroyMerlin", sans-serif;font-weight:400}.mc-header .mc-header__back{height:2.25rem}.mc-header .mc-header__heading__title{font-size:1.75rem;line-height:1.2857142857}.mc-header__left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1rem;padding-top:0.5rem;padding-left:2rem}.mc-header__right{-webkit-box-flex:0;-ms-flex:0;flex:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:1.5rem;margin-bottom:1rem;padding-top:1rem;padding-right:2rem;height:2rem;width:28rem;min-width:28rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mc-header__tabs{width:100%;position:relative;padding-left:2rem;padding-right:2rem}.mc-header__tabs::before{content:"";background-color:#b3b3b3;top:0;right:0;height:1px;position:absolute;width:100%;z-index:1}.mc-header__breadcrumb{height:3rem;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mc-header__back{margin:0;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;background-color:transparent;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzMzMzMzMyI+PHBhdGggZD0iTTI4IDE1SDYuNDFsNi4zLTYuMjlhMSAxIDAgMTAtMS40Mi0xLjQybC04IDhhMS4xNSAxLjE1IDAgMDAtLjIxLjMzIDEgMSAwIDAwMCAuNzYuOTMuOTMgMCAwMC4yMS4zM2w4IDhhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJMNi40MSAxN0gyOGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:center;background-size:2rem;color:currentColor;display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;margin-top:0.5rem;margin-right:1rem;height:2rem}.mc-header__back__label{font-size:0;height:1px;overflow:hidden;display:block}.mc-header__heading{display:inline-block;width:calc(100% - 3em)}.mc-header__heading__title{font-weight:600;color:#191919;width:100%;margin-top:0.5rem;margin-bottom:0}.mc-header__heading__subtitle{font-weight:400;color:#191919;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__status{font-weight:400;display:inline-block;margin-top:0.25rem;margin-bottom:0}.mc-header__heading__subtitle+.mc-header__heading__status{margin-left:1rem}.mc-header__icons{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:9rem;width:9rem}.mc-header__selector{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;padding-left:0;margin-left:1.5rem;max-width:16rem;width:16rem}.mc-header__selector--show-separator{padding-left:1.5rem}.mc-header__selector--show-separator::before{content:"";background-color:#b3b3b3;left:0;height:100%;position:absolute;width:1px}.mc-header--no-shadow{-webkit-box-shadow:none;box-shadow:none}.mc-header--animate{margin-top:0px;-webkit-transition:margin-top ease-out 0.4s;-o-transition:margin-top ease-out 0.4s;transition:margin-top ease-out 0.4s;width:100%}@media screen and (min-width: 360px){.mc-header__breadcrumb{margin-left:-1.25rem;margin-right:1.25rem}.mc-header__left{padding-left:1rem}.mc-header__right{padding-right:1rem}.mc-header__tabs{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 390px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(1.375, "true");margin-right:1.375rem}}@media screen and (min-width: 680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 769px){.mc-header__breadcrumb{margin-left:-magic-unit-rem(2.125, "true");margin-right:2.125rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.mc-header__breadcrumb{margin-left:-3rem;margin-right:3rem}.mc-header__left{padding-left:3rem}.mc-header__right{padding-right:3rem}.mc-header__tabs{padding-left:3rem;padding-right:3rem}}@media screen and (min-width: 1280px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}.mc-header__left{padding-left:2rem}.mc-header__right{padding-right:2rem}.mc-header__tabs{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1440px){.mc-header__breadcrumb{margin-left:-7rem;margin-right:7rem}}@media screen and (min-width: 1680px){.mc-header__breadcrumb{margin-left:-2rem;margin-right:2rem}}@media screen and (min-width: 1920px){.mc-header__breadcrumb{margin-left:-2.5rem;margin-right:2.5rem}}.mc-header--s .mc-header__back{height:2rem}.mc-header--s .mc-header__heading__title{font-size:1.4375rem;line-height:1.3913043478}.mc-header--l .mc-header__back{height:2.75rem}.mc-header--l .mc-header__heading__title{font-size:2.125rem;line-height:1.2941176471}:host{display:block;line-height:0}',this.shadowRoot.appendChild(d),t(this,{target:this.shadowRoot,props:{...a(this.attributes),$$slots:i(this)},customElement:!0},W,R,n,{title:0,subtitle:1,size:2,status:3,statustype:4,back:21,breadcrumb:5,tabs:22,noshadow:23,a11ylabels:24,scrollcontainer:25,nopaddingbreadcrumb:6,hasicons:7,hasselector:8,hideoptions:9},null,[-1,-1]),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["title","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions"]}get title(){return this.$$.ctx[0]}set title(e){this.$$set({title:e}),s()}get subtitle(){return this.$$.ctx[1]}set subtitle(e){this.$$set({subtitle:e}),s()}get size(){return this.$$.ctx[2]}set size(e){this.$$set({size:e}),s()}get status(){return this.$$.ctx[3]}set status(e){this.$$set({status:e}),s()}get statustype(){return this.$$.ctx[4]}set statustype(e){this.$$set({statustype:e}),s()}get back(){return this.$$.ctx[21]}set back(e){this.$$set({back:e}),s()}get breadcrumb(){return this.$$.ctx[5]}set breadcrumb(e){this.$$set({breadcrumb:e}),s()}get tabs(){return this.$$.ctx[22]}set tabs(e){this.$$set({tabs:e}),s()}get noshadow(){return this.$$.ctx[23]}set noshadow(e){this.$$set({noshadow:e}),s()}get a11ylabels(){return this.$$.ctx[24]}set a11ylabels(e){this.$$set({a11ylabels:e}),s()}get scrollcontainer(){return this.$$.ctx[25]}set scrollcontainer(e){this.$$set({scrollcontainer:e}),s()}get nopaddingbreadcrumb(){return this.$$.ctx[6]}set nopaddingbreadcrumb(e){this.$$set({nopaddingbreadcrumb:e}),s()}get hasicons(){return this.$$.ctx[7]}set hasicons(e){this.$$set({hasicons:e}),s()}get hasselector(){return this.$$.ctx[8]}set hasselector(e){this.$$set({hasselector:e}),s()}get hideoptions(){return this.$$.ctx[9]}set hideoptions(e){this.$$set({hideoptions:e}),s()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n export let nopaddingbreadcrumb: boolean;\n export let hasicons: boolean;\n export let hasselector: boolean;\n export let hideoptions = false;\n\n const headerAnimationThreshold = 5;\n\n let eventHandler = new EventHandler();\n let originalScrollPos = 0;\n let hasAnimation: boolean;\n let root: HTMLElement;\n\n $: parsedBreadcrumb =\n typeof breadcrumb === 'string'\n ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n : breadcrumb;\n\n $: parsedTabs =\n typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n $: parsedA11yLabels =\n typeof a11ylabels === 'string'\n ? (JSON.parse(a11ylabels) as A11yLabels)\n : a11ylabels;\n\n $: hasBack = back && back !== 'false';\n $: hasNoShadow = noshadow && noshadow !== 'false';\n $: {\n hasAnimation = Boolean(scrollcontainer);\n updateAnimation(scrollcontainer);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function goBack() {\n eventHandler.dispatch('on-back-click', {});\n }\n\n function updateAnimation(element: HTMLElement) {\n if (element) {\n element.removeEventListener('scroll', handleScroll);\n element.addEventListener('scroll', handleScroll);\n }\n }\n\n function handleScroll() {\n const currentScrollPos = scrollcontainer.scrollTop;\n const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n if (originalScrollPos > currentScrollPos) {\n // scroll up\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n root.style.marginTop = `${Math.max(\n -currentScrollPos,\n originHeaderMargin,\n )}px`;\n } else {\n // scroll while below header zone\n root.style.marginTop = '0';\n }\n } else {\n // scroll down\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n\n root.style.transition = 'none';\n root.style.marginTop = `${-currentScrollPos}px`;\n } else {\n // scroll while below header zone\n root.style.transition = 'margin-top ease-out 0.4s';\n root.style.marginTop = `${\n -root.offsetHeight - headerAnimationThreshold\n }px`;\n }\n }\n\n originalScrollPos = currentScrollPos;\n }\n</script>\n\n<div\n class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n class:mc-header--no-shadow={hasNoShadow}\n class:mc-header--animate={hasAnimation}\n bind:this={root}\n {...attributes}\n>\n <div class=\"mc-header__left\">\n {#if breadcrumb}\n <div class=\"mc-header__breadcrumb\">\n <Breadcrumb\n items={JSON.stringify(parsedBreadcrumb)}\n nopadding={nopaddingbreadcrumb}\n on:link-clicked={(event) =>\n eventHandler.dispatch('link-clicked', event.detail)}\n />\n </div>\n {/if}\n\n {#if hasBack}\n <button class=\"mc-header__back\" on:click={goBack}>\n <span class=\"mc-header__back__label\">\n {parsedA11yLabels?.['back'] || 'Back'}\n </span>\n </button>\n {/if}\n\n <div class=\"mc-header__heading\">\n <h1 class=\"mc-header__heading__title\">\n {title}\n </h1>\n {#if subtitle}\n <div class=\"mc-header__heading__subtitle\">\n {subtitle}\n </div>\n {/if}\n {#if status}\n <div class=\"mc-header__heading__status\">\n <Badge label={status} type={statustype} />\n </div>\n {/if}\n </div>\n </div>\n {#if !hideoptions}\n <div class=\"mc-header__right\">\n {#if $$slots?.icons || hasicons}\n <div class=\"mc-header__icons\">\n <slot name=\"icons\" />\n </div>\n {/if}\n {#if $$slots?.selector || hasselector}\n <div\n class:mc-header__selector--show-separator={($$slots?.icons ||\n hasicons) &&\n ($$slots?.selector || hasselector)}\n class=\"mc-header__selector\"\n >\n <slot name=\"selector\" />\n </div>\n {/if}\n </div>\n {/if}\n {#if parsedTabs}\n <div class=\"mc-header__tabs\">\n <Tabs\n tabs={JSON.stringify(parsedTabs)}\n nodivider={true}\n on:tab-clicked={(event) =>\n eventHandler.dispatch('tab-clicked', event.detail)}\n />\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.header.scss';\n\n :host {\n display: block;\n line-height: 0;\n }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"6dAkHiBA,KAAKC,UAAUC,EAAgB,eAC3BA,EAAmB,gHAHlCC,EAOKC,EAAAC,EAAAC,6DALMN,KAAKC,UAAUC,EAAgB,4BAC3BA,EAAmB,mIAU7BA,EAAgB,KAAS,MAAK,QAAM,4HAFzCC,EAIQC,EAAAG,EAAAD,GAHNE,EAEMD,EAAAE,4BAHkCP,EAAM,uCAE3CA,EAAgB,KAAS,MAAK,QAAM,KAAAQ,EAAAC,EAAAC,4EAWpCV,EAAQ,wDADXC,EAEKC,EAAAC,EAAAC,8BADFJ,EAAQ,yEAKKA,EAAM,QAAQA,EAAU,yFADxCC,EAEKC,EAAAC,EAAAC,wDADWJ,EAAM,qBAAQA,EAAU,6HAOrCA,EAAO,KAAEW,OAASX,EAAQ,KAAAY,OAK1BZ,EAAO,KAAEa,UAAYb,EAAW,KAAAc,EAAAd,yFANvCC,EAgBKC,EAAAC,EAAAC,gDAfEJ,EAAO,KAAEW,OAASX,EAAQ,gDAK1BA,EAAO,KAAEa,UAAYb,EAAW,yNAJnCC,EAEKC,EAAAC,EAAAC,uLAIyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,aAHrCC,EAOKC,EAAAC,EAAAC,oEANyCJ,EAAO,KAAEW,OACnDX,QACCA,EAAO,KAAEa,UAAYb,EAAW,yEAW/BF,KAAKC,UAAUC,EAAU,gBACpB,wGAHfC,EAOKC,EAAAC,EAAAC,2DALKN,KAAKC,UAAUC,EAAU,oJAzD9BA,EAAU,IAAAe,EAAAf,KAWVA,EAAO,KAAAgB,EAAAhB,KAYLA,EAAQ,IAAAiB,EAAAjB,KAKRA,EAAM,IAAAkB,EAAAlB,MAOTA,EAAW,IAAAmB,EAAAnB,KAmBZA,EAAU,KAAAoB,EAAApB,6BA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,KAI5CA,EAAU,0IAwBPA,EAAK,qNA3BgBA,EAAW,8BACbA,EAAY,aAHxCC,EAwEKC,EAAAmB,EAAAjB,GAjEHE,EAmCKe,EAAAC,+CAfHhB,EAcKgB,EAAAC,GAbHjB,EAEIiB,EAAAC,wHAtBDxB,EAAU,oGAWVA,EAAO,4EAUPA,EAAK,IAEHA,EAAQ,yDAKRA,EAAM,sGAOTA,EAAW,yDAmBZA,EAAU,wJA7DGA,EAAI,GAAA,cAAiBA,EAAI,KAAK,OAAE,CAAAyB,MAAAC,cAI9C1B,EAAU,kCAHcA,EAAW,8BACbA,EAAY,uaA1ElC2B,EACAC,SArBOC,GAAaC,YACbC,GAAgBD,GAChBE,KAAAA,EAAmB,KAAGF,UACtBG,GAAcH,cACdI,GAAqBJ,QACrBK,GAAsBL,cACtBM,GAAsCN,QACtCO,GAA0BP,YAC1BQ,GAA0BR,cAC1BS,GAA+BT,mBAC/BU,GAA4BV,uBAC5BW,GAA4BX,YAC5BY,GAAiBZ,eACjBa,GAAoBb,GACpBc,YAAAA,GAAc,GAAKd,EAI1Be,MAAmBC,EACnBC,EAAoB,WAoCfC,UACDC,EAAmBT,EAAgBU,UACnCC,EAAqBC,OAAOxB,EAAKyB,MAAMC,UAAUC,QAAQ,KAAM,KAEjER,EAAoBE,EAElBA,EAAmBrB,EAAK4B,kBAE1B5B,EAAKyB,MAAMC,UAAS,GAAMG,KAAKC,KAC5BT,EACDE,OAAkBvB,GAIpB+B,EAAA,GAAA/B,EAAKyB,MAAMC,UAAY,IAAG1B,GAIxBqB,EAAmBrB,EAAK4B,cAG1BG,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,OAAMhC,GAC9B+B,EAAA,GAAA/B,EAAKyB,MAAMC,WAAgBL,OAAgBrB,KAG3C+B,EAAA,GAAA/B,EAAKyB,MAAMO,WAAa,2BAA0BhC,QAClDA,EAAKyB,MAAMC,WACR1B,EAAK4B,aAlEmB,OAmE3B5B,IAIJmB,EAAoBE,unBAhEnBU,EAAA,GAAAE,EACqB,iBAAfzB,EACFtC,KAAKgE,MAAM1B,GACZA,0BAEHuB,EAAA,GAAAI,EACe,iBAAT1B,EAAqBvC,KAAKgE,MAAMzB,GAAwBA,2BAE9DsB,EAAA,GAAAK,EACqB,iBAAfzB,EACFzC,KAAKgE,MAAMvB,GACZA,+BAEH0B,EAAU9B,GAAiB,UAATA,+BAClB+B,EAAc5B,GAAyB,UAAbA,iCAE3BX,EAAewC,QAAQ3B,IAShB,SAAgB4B,GACnBA,IACFA,EAAQC,oBAAoB,SAAUrB,GACtCoB,EAAQE,iBAAiB,SAAUtB,IAXrCuB,CAAgB/B,SAEfgC,EAALC,OAAAC,UAAuBC,+BACXH,EAAW/C,yDAEnBoB,EAAa+B,SAAS,gBAAe,CAAA,gBA2DbC,GAChBhC,EAAa+B,SAAS,eAAgBC,EAAMC,QAqD/BD,GACfhC,EAAa+B,SAAS,cAAeC,EAAMC,gDAhExClD,EAAImD"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
export let noshadow: boolean | string;
|
|
22
22
|
export let a11ylabels: string | A11yLabels;
|
|
23
23
|
export let scrollcontainer: HTMLElement;
|
|
24
|
-
|
|
24
|
+
export let nopaddingbreadcrumb: boolean;
|
|
25
25
|
export let hasicons: boolean;
|
|
26
26
|
export let hasselector: boolean;
|
|
27
27
|
export let hideoptions = false;
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<div class="mc-header__breadcrumb">
|
|
114
114
|
<Breadcrumb
|
|
115
115
|
items={JSON.stringify(parsedBreadcrumb)}
|
|
116
|
-
nopadding=
|
|
116
|
+
nopadding={nopaddingbreadcrumb}
|
|
117
117
|
on:link-clicked={(event) =>
|
|
118
118
|
eventHandler.dispatch('link-clicked', event.detail)}
|
|
119
119
|
/>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#eeeff1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#b3b7c1}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
1
|
+
import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#eeeff1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#b3b7c1}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
|
|
2
2
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { onDestroy } from 'svelte';\n import Segment from './sidebar-segment.nested.svelte';\n import Section from './sidebar-section.nested.svelte';\n import NavigationUser from './sidebar-user.nested.svelte';\n import NavigationSeparator from './sidebar-separator.nested.svelte';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n selectFeature,\n updateSidebarData,\n toggleSidebar,\n isSidebarOpen,\n sidebar,\n selectedFeature,\n } from './sidebar-service';\n import type { Unsubscriber } from 'svelte/store';\n import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n export let data: string | Sidebar;\n export let open: boolean;\n export let code: string;\n export let user: string | User;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let parsedUser: User;\n let previousCode: string;\n let previousData: string | Sidebar;\n let previousOpen = false;\n\n $: updateData(code, data);\n $: updateOpen(open);\n $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n\n function updateData(newCode: string, newData: string | Sidebar) {\n if (typeof previousData !== typeof newData || previousData !== newData) {\n previousData = newData;\n updateSidebarData(newData);\n }\n if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n previousCode = newCode;\n selectFeature(newCode);\n }\n }\n\n function updateOpen(newOpenStatus?: boolean) {\n if (\n typeof previousOpen !== typeof newOpenStatus ||\n previousOpen !== newOpenStatus\n ) {\n previousOpen = Boolean(newOpenStatus);\n toggleSidebar(Boolean(newOpenStatus));\n }\n }\n\n const unsubscribes: Unsubscriber[] = [];\n unsubscribes.push(\n isSidebarOpen.subscribe((state) => {\n eventHandler.dispatch('on-toggle', state);\n }),\n );\n\n unsubscribes.push(\n selectedFeature.subscribe((selection) => {\n // Emit an event and close the menu when the selection changes.\n if (selection) {\n toggleSidebar(false);\n eventHandler.dispatch(\n 'on-select',\n selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n );\n }\n }),\n );\n\n onDestroy(() => {\n for (const unsubscribe of unsubscribes) {\n unsubscribe();\n }\n });\n</script>\n\n<nav\n class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n aria-expanded={$isSidebarOpen}\n aria-labelledby=\"mc-sidebar__trigger\"\n {...attributes}\n>\n <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n <button\n id=\"mc-sidebar__trigger\"\n class=\"mc-sidebar__trigger\"\n aria-label={$isSidebarOpen\n ? a11yLabels?.['close'] || 'Close the sidebar'\n : a11yLabels?.['open'] || 'Open the sidebar'}\n on:click={() => toggleSidebar()}\n >\n <span class=\"mc-sidebar__trigger__container\">\n {#if $isSidebarOpen}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-sidebar__trigger-icon\"\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n ><path\n d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n /></svg\n >\n {/if}\n </span>\n </button>\n <Segment data={$sidebar?.HOME} />\n <NavigationSeparator />\n <Section data={$sidebar?.FEATURES} {a11yLabels} />\n {#if $sidebar?.UTILITIES}\n <div class=\"mc-sidebar__utilities\">\n {#each $sidebar?.UTILITIES as section}\n <NavigationSeparator />\n <ul>\n {#each section as feature}\n <li class=\"mc-sidebar__utilities__item\">\n <Segment data={feature} />\n </li>\n {/each}\n </ul>\n {/each}\n </div>\n {/if}\n </div>\n {#if parsedUser}\n <NavigationUser\n user={parsedUser}\n data={$sidebar?.USER_FEATURES}\n {a11yLabels}\n />\n {/if}\n</nav>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n font-size: 14px;\n color: white;\n box-sizing: border-box;\n fill: $color-sidebar-icon;\n width: 320px;\n background: $color-sidebar-background;\n display: block;\n height: 100vh;\n\n &__container {\n height: 100%;\n display: flex;\n flex-direction: column;\n &.has-bottom-panel {\n height: calc(100% - 88px);\n }\n }\n\n &__utilities {\n margin-bottom: 24px;\n\n &__item {\n margin: 4px 0px;\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__trigger {\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n margin: 28px 0;\n min-height: 38px;\n width: 100%;\n font-size: inherit;\n font-family: inherit;\n\n &-icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n width: 24px;\n height: 24px;\n }\n }\n\n &:hover &__container {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n & .mc-sidebar__trigger__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n &.is-open {\n @include transition(width 300ms ease-in-out);\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 266px;\n width: 38px;\n border-radius: 4px;\n }\n }\n\n &.is-close {\n @include transition(width 300ms ease-in-out);\n\n width: 64px;\n padding: 0;\n\n .mc-sidebar__trigger__container {\n @include transition(\n width 300ms ease-in-out,\n margin-left 300ms ease-in-out,\n border-radius 300ms ease-in-out\n );\n margin-left: 0px;\n width: 64px;\n border-radius: 0px;\n }\n }\n\n ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/header/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAQnD,
|
|
1
|
+
{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/header/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;;AAQnD,wBA6FU;AAyHV,eAAO,MAAM,OAAO,uCAAoB,CAAC;AAczC,eAAO,MAAM,cAAc,uCAAoB,CAAC;AAehD,eAAO,MAAM,SAAS,uCAAoB,CAAC;AAiB3C,eAAO,MAAM,aAAa,uCAAoB,CAAC"}
|