https://www.sbk.org/_assets/5704df88ed45aead8ce948e4ec501605/assets/breadcrumb-C5X447d4.js

1import{r as d,a as h,i as b,x as l}from"./lit-element-CMl-6rf4.js";import{t as p}from"./custom-element-UsVr97OX.js";import{a as m,s as v,b as k}from"./variables-Cy9Q-5Rw.js";import{n as C}from"./property-YChvWeu5.js";const y=d(`${m}`),w=d(`${v}`),S=d(`${k}`),x=h`
2  :host {
3    display: block;
4    height: 47.5px;
5    min-height: 47.5px;
6    margin: 0 auto 0 auto;
7    max-width: calc(
8      var(--sbkCoreContentAreaMaxWidth) + 2 * var(--sbkCoreGridXlMargin)
9    );
10    position: relative;
11    padding: 0 var(--sbkCoreGridSmMargin);
12  }
13
14  @media (min-width: ${y}) {
15    :host {
16      height: 52px;
17      min-height: 52px;
18      padding: 0 var(--sbkCoreGridMdMargin);
19    }
20  }
21  @media (min-width: ${w}) {
22    :host {
23      padding: 0 var(--sbkCoreGridLgMargin);
24    }
25  }
26  @media (min-width: ${S}) {
27    :host {
28      padding: 0 var(--sbkCoreGridXlMargin);
29    }
30  }
31
32  .container {
33    white-space: nowrap;
34    overflow-x: auto;
35    -webkit-overflow-scrolling: touch;
36    -ms-overflow-style: -ms-autohiding-scrollbar;
37    &::-webkit-scrollbar {

38      display: none;
39    }
40  }
41
42  ol {
43    list-style: none;
44    padding-left: 0;
45    display: flex;
46    align-items: center;
47    gap: calc(
48      var(--sbkBreadCrumbsSpacingGap) * 2 +
49        var(--sbkBreadCrumbsSizingDividerWidth)
50    );
51  }
52
53  .fade {
54    position: absolute;
55    top: 0;
56    bottom: 0;
57    width: 20%;
58    pointer-events: none;
59    z-index: 1;
60  }
61
62  .fade-left {
63    left: 0;
64    background: linear-gradient(
65      to right,
66      var(--sbkColorContentBgColorDefault),
67      rgba(255, 255, 255, 0)
68    );
69  }
70
71  .fade-right {
72    right: 0;
73    background: linear-gradient(
74      to left,
75      var(--sbkColorContentBgColorDefault),
76      rgba(255, 255, 255, 0)
77    );
78  }
79`,B=h`
80  * {
81    box-sizing: border-box;
82  }
83
84  :host {
85    display: flex;
86    position: relative;
87    box-sizing: border-box;
88  }
89
90  :host(:last-of-type) {
91    font: var(--sbkBreadCrumbsTypographyBoldXs);
92  }
93
94  :host(:not(:last-child))::after {
95    position: absolute;
96    content: "";
97    border-radius: var(--sbkBreadCrumbsBorderRadiusDivider);
98    right: calc(
99      (
100          var(--sbkBreadCrumbsSpacingGap) +
101            var(--sbkBreadCrumbsSizingDividerWidth)
102        ) *
103        -1
104    );
105    background: var(--sbkBreadCrumbsFgColorDefault);
106    height: var(--sbkBreadCrumbsSizingDividerHeight);
107    width: var(--sbkBreadCrumbsSizingDividerWidth);
108  }
109
110  div {
111    display: flex;
112  }
113`;var $=Object.defineProperty,D=Object.getOwnPropertyDescriptor,g=(t,r,o,s)=>{for(var e=s>1?void 0:s?D(r,o):r,i=t.length-1,a;i>=0;i--)(a=t[i])&&(e=(s?a(r,o,e):a(e))||e);return s&&e&&$(r,o,e),e};let n=class extends b{constructor(){super(...arguments),this.href=""}static get styles(){return B}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listitem")}disconnectedCallback(){super.disconnectedCallback()}render(){return l`
114      <div>
115        ${this.href?l` <sbk-link variant="regular" size="xs" href=${this.href}>
116              <slot></slot>
117            </sbk-link>`:l`<span aria-current="page"><slot></slot></span>`}
118      </div>
119    `}};g([C()],n.prototype,"href",2);n=g([p("sbk-breadcrumb-item")],n);var L=Object.getOwnPropertyDescriptor,M=(t,r,o,s)=>{for(var e=s>1?void 0:s?L(r,o):r,i=t.length-1,a;i>=0;i--)(a=t[i])&&(e=a(e)||e);return e};let c=class extends b{constructor(){super(...arguments),this.updateScrollPosition=()=>{const t=this.shadowRoot?.querySelector(".container"),r=this.shadowRoot?.querySelector("slot"),o=this.shadowRoot?.querySelector("ol");if(r&&o){const s=r.assignedElements();if(t&&s.length>0){const e=s[s.length-1];if(t.scrollWidth>t.clientWidth&&e){const i=window.getComputedStyle(this),a=parseFloat(i.paddingLeft),f=window.getComputedStyle(o),u=parseFloat(f.gap);t.scrollLeft=Math.max(0,e.offsetLeft-a-u),t.focus()}}}}}static get styles(){return x}firstUpdated(){requestAnimationFrame(()=>{this.updateScrollPosition(),this.handleScroll()})}render(){return l`
120      <nav
121        class="container"
122        aria-label="Breadcrumb"
123        @scroll=${this.handleScroll}
124      >
125        <div class="fade fade-left"></div>
126        <ol>
127          <slot></slot>
128        </ol>
129        <div class="fade fade-right"></div>
130      </nav>
131    `}handleScroll(){const t=this.shadowRoot?.querySelector(".container"),r=this.shadowRoot?.querySelector(".fade-left"),o=this.shadowRoot?.querySelector(".fade-right");t&&r&&o&&(t.scrollLeft>0?r.style.display="block":r.style.display="none",t.scrollWidth>t.clientWidth&&t.scrollLeft<t.scrollWidth-t.clientWidth?o.style.display="block":o.style.display="none")}};c=M([p("sbk-breadcrumb")],c);