scb-wc-test 0.1.209 → 0.1.211
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/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +4 -4
- package/mvc/components/scb-breadcrumb/scb-breadcrumb.js +36 -35
- package/mvc/components/scb-calendar/scb-calendar.js +7 -1
- package/package.json +2 -2
- package/scb-breadcrumb/scb-breadcrumb-item.d.ts +1 -0
- package/scb-breadcrumb/scb-breadcrumb-item.js +26 -14
- package/scb-breadcrumb/scb-breadcrumb.d.ts +3 -0
- package/scb-breadcrumb/scb-breadcrumb.js +151 -98
- package/scb-calendar/scb-calendar.js +41 -35
- package/scb-wc-test.bundle.js +356 -349
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as o,t as
|
|
1
|
+
import{n as o,t as h,i as b,a as f,x as l}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(r,i,t){try{customElements.get(r)||s(r,i,t)}catch(a){var n=String(a||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var d=Object.defineProperty,p=Object.getOwnPropertyDescriptor,c=(e,s,r,i)=>{for(var t=i>1?void 0:i?p(s,r):s,n=e.length-1,a;n>=0;n--)(a=e[n])&&(t=(i?a(s,r,t):a(t))||t);return i&&t&&d(s,r,t),t};let u=class extends b{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}connectedCallback(){if(super.connectedCallback(),this.hasAttribute("current")&&!this.hasAttribute("is-current")&&(this.isCurrent=!0),!this.href){const e=this.getAttribute("href");e&&(this.href=e)}}static get styles(){return f`
|
|
2
2
|
.breadcrumb-separator {
|
|
3
3
|
margin: var(--spacing-0) var(--spacing-3);
|
|
4
4
|
color: var(--md-sys-color-on-surface);
|
|
@@ -8,7 +8,7 @@ import{n as o,t as b,i as p,a as d,x as l}from"../../vendor/vendor.js";import"..
|
|
|
8
8
|
color: var(--md-sys-color-on-surface);
|
|
9
9
|
font-family: var(--brand, Inter);
|
|
10
10
|
}
|
|
11
|
-
`}updated(
|
|
12
|
-
<scb-link href="${this.href}">${this.label}</scb-link>
|
|
11
|
+
`}updated(e){e.has("isCurrent")&&(this.dispatchEvent(new CustomEvent("current-changed",{detail:{isCurrent:this.isCurrent},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("currentchanged",{detail:{isCurrent:this.isCurrent,value:this.isCurrent},bubbles:!0,composed:!0})))}render(){switch(!0){case this.isCurrent:return l`<span class="breadcrumb-current">${this.label}</span>`;default:return l`
|
|
12
|
+
<scb-link href="${this.href||this.getAttribute("href")||""}">${this.label}</scb-link>
|
|
13
13
|
<span class="breadcrumb-separator">/</span>
|
|
14
|
-
`}}};
|
|
14
|
+
`}}};c([o({type:String})],u.prototype,"label",2);c([o({type:Boolean,attribute:"is-current",reflect:!0})],u.prototype,"isCurrent",2);c([o({type:String,attribute:"item-href"})],u.prototype,"href",2);u=c([h("scb-breadcrumb-item")],u);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as
|
|
1
|
+
import{n as u,t as v,i as _,a as k,x as b}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,n,a){try{customElements.get(r)||t(r,n,a)}catch(i){var s=String(i||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var w=Object.defineProperty,C=Object.getOwnPropertyDescriptor,y=e=>{throw TypeError(e)},l=(e,t,r,n)=>{for(var a=n>1?void 0:n?C(t,r):t,s=e.length-1,i;s>=0;s--)(i=e[s])&&(a=(n?i(t,r,a):i(a))||a);return n&&a&&w(t,r,a),a},x=(e,t,r)=>t.has(e)||y("Cannot "+r),A=(e,t,r)=>t.has(e)?y("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),g=(e,t,r)=>(x(e,t,"access private method"),r),d,m;let o=class extends _{constructor(){super(...arguments),A(this,d),this.showAll=!1,this.currentIndex=void 0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}static get styles(){return k`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
margin-block-start: var(--scb-breadcrumb-spacing-block-start, 0);
|
|
@@ -13,19 +13,19 @@ import{n as l,t as u,i as g,a as f,x as d}from"../../vendor/vendor.js";import"./
|
|
|
13
13
|
flex-wrap: wrap;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.breadcrumb-item {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
16
21
|
.breadcrumb-separator {
|
|
17
22
|
margin: var(--spacing-0) var(--spacing-3);
|
|
18
23
|
color: var(--md-sys-color-on-surface);
|
|
19
24
|
}
|
|
20
25
|
|
|
21
|
-
.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
.collapsed > scb-breadcrumb-item:nth-child(-n + 3),
|
|
26
|
-
.collapsed > scb-breadcrumb-item:nth-last-child(-n + 3) {
|
|
27
|
-
display: flex;
|
|
28
|
-
align-items: anchor-center;
|
|
26
|
+
.breadcrumb-current {
|
|
27
|
+
color: var(--md-sys-color-on-surface);
|
|
28
|
+
font-family: var(--brand, Inter);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.ellipsis {
|
|
@@ -39,14 +39,6 @@ import{n as l,t as u,i as g,a as f,x as d}from"../../vendor/vendor.js";import"./
|
|
|
39
39
|
outline: none;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.collapsed .ellipsis {
|
|
43
|
-
display: inline-flex;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.expanded .ellipsis {
|
|
47
|
-
display: none;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
42
|
.breadcrumb-animate {
|
|
51
43
|
opacity: 0;
|
|
52
44
|
transform: translateY(10px);
|
|
@@ -74,22 +66,31 @@ import{n as l,t as u,i as g,a as f,x as d}from"../../vendor/vendor.js";import"./
|
|
|
74
66
|
transform: translateY(0);
|
|
75
67
|
}
|
|
76
68
|
}
|
|
77
|
-
`}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this.requestUpdate()}),this._observer.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}firstUpdated(){
|
|
78
|
-
<div class="scb-breadcrumb ${
|
|
79
|
-
${
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
69
|
+
`}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this.requestUpdate()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","item-href","href","is-current","current"]})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}firstUpdated(){g(this,d,m).call(this)}updated(e){e.has("showAll")&&(this.dispatchEvent(new CustomEvent("show-all-changed",{detail:{showAll:this.showAll},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("showallchanged",{detail:{showAll:this.showAll,value:this.showAll},bubbles:!0,composed:!0}))),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&g(this,d,m).call(this)}mapSpacingToken(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded .breadcrumb-item");e&&(e.forEach((t,r)=>{t.classList.add("breadcrumb-animate"),t.style.animationDelay=`${r*60}ms`}),setTimeout(()=>{e.forEach(t=>{t.classList.remove("breadcrumb-animate"),t.style.animationDelay=""})},600))}))}getItemLabel(e){const t=e.label;return typeof t=="string"?t:e.getAttribute("label")??""}getItemHref(e){const t=e;return typeof t.itemHref=="string"?t.itemHref:typeof t.href=="string"?t.href:e.getAttribute("item-href")??e.getAttribute("href")??""}render(){const e=Array.from(this.children).filter(s=>s.tagName.toLowerCase()==="scb-breadcrumb-item"),t=Math.max(0,e.length-1);let r=t;if(e.length>0){const s=typeof this.currentIndex=="number"&&!Number.isNaN(this.currentIndex)?Math.trunc(this.currentIndex):void 0;if(typeof s=="number"&&s>=0&&s<e.length)r=s;else for(let i=e.length-1;i>=0;i--){const c=e[i];if(typeof c.isCurrent=="boolean"?c.isCurrent:e[i].hasAttribute("is-current")||e[i].hasAttribute("current")){r=i;break}}e.forEach((i,c)=>{i.toggleAttribute("is-current",c===r)})}const n=e.length>6&&!this.showAll&&r===t,a=[];if(n){const s=e.slice(0,3),i=e.slice(-3);s.forEach((c,p)=>{a.push({type:"item",item:c,isCurrent:p===r})}),a.push({type:"ellipsis"}),i.forEach((c,p)=>{const h=e.length-3+p;a.push({type:"item",item:c,isCurrent:h===r})})}else e.forEach((s,i)=>{a.push({type:"item",item:s,isCurrent:i===r})});return b`
|
|
70
|
+
<div class="scb-breadcrumb ${n?"collapsed":"expanded"}">
|
|
71
|
+
${a.map((s,i)=>{const c=i===0?b``:b`<span class="breadcrumb-separator">/</span>`;if(s.type==="ellipsis")return b`
|
|
72
|
+
${c}
|
|
73
|
+
<span
|
|
74
|
+
class="breadcrumb-item ellipsis"
|
|
75
|
+
aria-label="Visa alla"
|
|
76
|
+
role="button"
|
|
77
|
+
tabindex="0"
|
|
78
|
+
@click=${this._onEllipsisClick}
|
|
79
|
+
@keydown=${f=>{(f.key==="Enter"||f.key===" ")&&this._onEllipsisClick()}}
|
|
80
|
+
>
|
|
81
|
+
<md-icon>
|
|
82
|
+
<md-focus-ring></md-focus-ring>
|
|
83
|
+
more_horiz
|
|
84
|
+
</md-icon>
|
|
85
|
+
</span>
|
|
86
|
+
`;const p=this.getItemLabel(s.item),h=this.getItemHref(s.item);return s.isCurrent?b`
|
|
87
|
+
${c}
|
|
88
|
+
<span class="breadcrumb-item breadcrumb-current">${p}</span>
|
|
89
|
+
`:b`
|
|
90
|
+
${c}
|
|
91
|
+
<span class="breadcrumb-item">
|
|
92
|
+
<scb-link href="${h}">${p}</scb-link>
|
|
93
|
+
</span>
|
|
94
|
+
`})}
|
|
94
95
|
</div>
|
|
95
|
-
`}};
|
|
96
|
+
`}};d=new WeakSet;m=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,r=this.mapSpacingToken(this.spacingBottom)??e,n=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-breadcrumb-spacing-block-start",t):this.style.removeProperty("--scb-breadcrumb-spacing-block-start"),r?this.style.setProperty("--scb-breadcrumb-spacing-block-end",r):this.style.removeProperty("--scb-breadcrumb-spacing-block-end"),n?this.style.setProperty("--scb-breadcrumb-spacing-inline-start",n):this.style.removeProperty("--scb-breadcrumb-spacing-inline-start"),a?this.style.setProperty("--scb-breadcrumb-spacing-inline-end",a):this.style.removeProperty("--scb-breadcrumb-spacing-inline-end")};l([u({type:Boolean,attribute:"show-all",reflect:!0})],o.prototype,"showAll",2);l([u({type:Number,attribute:"current-index",reflect:!0})],o.prototype,"currentIndex",2);l([u({type:String,reflect:!0})],o.prototype,"spacing",2);l([u({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);l([u({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);l([u({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",2);l([u({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",2);o=l([v("scb-breadcrumb")],o);
|
|
@@ -102,7 +102,13 @@ import{a as W,n as w,i as j,x as D,t as R}from"../../vendor/vendor.js";import"./
|
|
|
102
102
|
border-radius: 6px;
|
|
103
103
|
}
|
|
104
104
|
.calendar-day--other {
|
|
105
|
-
|
|
105
|
+
color: light-dark(var(--n-40), var(--n-70));
|
|
106
|
+
}
|
|
107
|
+
.calendar-day--other .calendar-day-event-title {
|
|
108
|
+
color: inherit;
|
|
109
|
+
}
|
|
110
|
+
.calendar-day--other .calendar-day-number {
|
|
111
|
+
font-weight: var(--weight-regular);
|
|
106
112
|
}
|
|
107
113
|
.calendar-day-number {
|
|
108
114
|
font-size: var(--md-sys-typescale-label-small-size);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.211",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -378,5 +378,5 @@
|
|
|
378
378
|
},
|
|
379
379
|
"./mvc/*": "./mvc/*"
|
|
380
380
|
},
|
|
381
|
-
"buildHash": "
|
|
381
|
+
"buildHash": "652BB427A72DB8D3F41BFF05E26DBC280C56180B453A833E27992817C82EBA24"
|
|
382
382
|
}
|
|
@@ -3,6 +3,7 @@ export declare class SCBBreadcrumbItem extends LitElement {
|
|
|
3
3
|
label: string;
|
|
4
4
|
isCurrent: boolean;
|
|
5
5
|
href: string;
|
|
6
|
+
connectedCallback(): void;
|
|
6
7
|
static get styles(): import('lit').CSSResult;
|
|
7
8
|
protected updated(changed: Map<string, unknown>): void;
|
|
8
9
|
protected render(): TemplateResult;
|
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as o, customElement as
|
|
1
|
+
import { LitElement as l, css as b, html as h } from "lit";
|
|
2
|
+
import { property as o, customElement as p } from "lit/decorators.js";
|
|
3
3
|
import "../scb-link/scb-link.js";
|
|
4
|
-
var f = Object.defineProperty,
|
|
5
|
-
for (var
|
|
6
|
-
(
|
|
7
|
-
return
|
|
4
|
+
var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (r, s, a, i) => {
|
|
5
|
+
for (var t = i > 1 ? void 0 : i ? m(s, a) : s, u = r.length - 1, c; u >= 0; u--)
|
|
6
|
+
(c = r[u]) && (t = (i ? c(s, a, t) : c(t)) || t);
|
|
7
|
+
return i && t && f(s, a, t), t;
|
|
8
8
|
};
|
|
9
|
-
let e = class extends
|
|
9
|
+
let e = class extends l {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.label = "", this.isCurrent = !1, this.href = "";
|
|
12
12
|
}
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
if (super.connectedCallback(), this.hasAttribute("current") && !this.hasAttribute("is-current") && (this.isCurrent = !0), !this.href) {
|
|
15
|
+
const r = this.getAttribute("href");
|
|
16
|
+
r && (this.href = r);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
13
19
|
static get styles() {
|
|
14
20
|
return b`
|
|
15
21
|
.breadcrumb-separator {
|
|
@@ -24,22 +30,28 @@ let e = class extends p {
|
|
|
24
30
|
`;
|
|
25
31
|
}
|
|
26
32
|
// Sänd event när isCurrent ändras (för Blazor-bryggan: current-changed)
|
|
27
|
-
updated(
|
|
28
|
-
|
|
33
|
+
updated(r) {
|
|
34
|
+
r.has("isCurrent") && (this.dispatchEvent(
|
|
29
35
|
new CustomEvent("current-changed", {
|
|
30
36
|
detail: { isCurrent: this.isCurrent },
|
|
31
37
|
bubbles: !0,
|
|
32
38
|
composed: !0
|
|
33
39
|
})
|
|
34
|
-
)
|
|
40
|
+
), this.dispatchEvent(
|
|
41
|
+
new CustomEvent("currentchanged", {
|
|
42
|
+
detail: { isCurrent: this.isCurrent, value: this.isCurrent },
|
|
43
|
+
bubbles: !0,
|
|
44
|
+
composed: !0
|
|
45
|
+
})
|
|
46
|
+
));
|
|
35
47
|
}
|
|
36
48
|
render() {
|
|
37
49
|
switch (!0) {
|
|
38
50
|
case this.isCurrent:
|
|
39
|
-
return
|
|
51
|
+
return h`<span class="breadcrumb-current">${this.label}</span>`;
|
|
40
52
|
default:
|
|
41
|
-
return
|
|
42
|
-
<scb-link href="${this.href}">${this.label}</scb-link>
|
|
53
|
+
return h`
|
|
54
|
+
<scb-link href="${this.href || this.getAttribute("href") || ""}">${this.label}</scb-link>
|
|
43
55
|
<span class="breadcrumb-separator">/</span>
|
|
44
56
|
`;
|
|
45
57
|
}
|
|
@@ -55,7 +67,7 @@ n([
|
|
|
55
67
|
o({ type: String, attribute: "item-href" })
|
|
56
68
|
], e.prototype, "href", 2);
|
|
57
69
|
e = n([
|
|
58
|
-
|
|
70
|
+
p("scb-breadcrumb-item")
|
|
59
71
|
], e);
|
|
60
72
|
export {
|
|
61
73
|
e as SCBBreadcrumbItem
|
|
@@ -2,6 +2,7 @@ import { LitElement, TemplateResult } from 'lit';
|
|
|
2
2
|
export declare class SCBBreadcrumb extends LitElement {
|
|
3
3
|
#private;
|
|
4
4
|
showAll: boolean;
|
|
5
|
+
currentIndex: undefined;
|
|
5
6
|
spacing: undefined;
|
|
6
7
|
spacingTop: undefined;
|
|
7
8
|
spacingBottom: undefined;
|
|
@@ -15,6 +16,8 @@ export declare class SCBBreadcrumb extends LitElement {
|
|
|
15
16
|
protected updated(changed: Map<string, unknown>): void;
|
|
16
17
|
private mapSpacingToken;
|
|
17
18
|
private _onEllipsisClick;
|
|
19
|
+
private getItemLabel;
|
|
20
|
+
private getItemHref;
|
|
18
21
|
render(): TemplateResult;
|
|
19
22
|
}
|
|
20
23
|
declare global {
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as v, css as k, html as u } from "lit";
|
|
2
|
+
import { property as b, customElement as w } from "lit/decorators.js";
|
|
3
3
|
import "./scb-breadcrumb-item.js";
|
|
4
|
+
import "../scb-link/scb-link.js";
|
|
4
5
|
import "@material/web/icon/icon.js";
|
|
5
6
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var
|
|
7
|
+
var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, y = (e) => {
|
|
7
8
|
throw TypeError(e);
|
|
8
|
-
},
|
|
9
|
-
for (var
|
|
10
|
-
(
|
|
11
|
-
return
|
|
12
|
-
},
|
|
13
|
-
let
|
|
9
|
+
}, l = (e, t, r, n) => {
|
|
10
|
+
for (var a = n > 1 ? void 0 : n ? _(t, r) : t, s = e.length - 1, i; s >= 0; s--)
|
|
11
|
+
(i = e[s]) && (a = (n ? i(t, r, a) : i(a)) || a);
|
|
12
|
+
return n && a && C(t, r, a), a;
|
|
13
|
+
}, x = (e, t, r) => t.has(e) || y("Cannot " + r), A = (e, t, r) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), g = (e, t, r) => (x(e, t, "access private method"), r), m, h;
|
|
14
|
+
let o = class extends v {
|
|
14
15
|
constructor() {
|
|
15
|
-
super(...arguments),
|
|
16
|
+
super(...arguments), A(this, m), this.showAll = !1, this.currentIndex = void 0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
|
|
16
17
|
}
|
|
17
18
|
static get styles() {
|
|
18
|
-
return
|
|
19
|
+
return k`
|
|
19
20
|
:host {
|
|
20
21
|
display: block;
|
|
21
22
|
margin-block-start: var(--scb-breadcrumb-spacing-block-start, 0);
|
|
@@ -30,19 +31,19 @@ let a = class extends u {
|
|
|
30
31
|
flex-wrap: wrap;
|
|
31
32
|
}
|
|
32
33
|
|
|
34
|
+
.breadcrumb-item {
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
33
39
|
.breadcrumb-separator {
|
|
34
40
|
margin: var(--spacing-0) var(--spacing-3);
|
|
35
41
|
color: var(--md-sys-color-on-surface);
|
|
36
42
|
}
|
|
37
43
|
|
|
38
|
-
.
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
.collapsed > scb-breadcrumb-item:nth-child(-n + 3),
|
|
43
|
-
.collapsed > scb-breadcrumb-item:nth-last-child(-n + 3) {
|
|
44
|
-
display: flex;
|
|
45
|
-
align-items: anchor-center;
|
|
44
|
+
.breadcrumb-current {
|
|
45
|
+
color: var(--md-sys-color-on-surface);
|
|
46
|
+
font-family: var(--brand, Inter);
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
.ellipsis {
|
|
@@ -56,14 +57,6 @@ let a = class extends u {
|
|
|
56
57
|
outline: none;
|
|
57
58
|
}
|
|
58
59
|
|
|
59
|
-
.collapsed .ellipsis {
|
|
60
|
-
display: inline-flex;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.expanded .ellipsis {
|
|
64
|
-
display: none;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
60
|
.breadcrumb-animate {
|
|
68
61
|
opacity: 0;
|
|
69
62
|
transform: translateY(10px);
|
|
@@ -96,110 +89,170 @@ let a = class extends u {
|
|
|
96
89
|
connectedCallback() {
|
|
97
90
|
super.connectedCallback(), this._observer = new MutationObserver(() => {
|
|
98
91
|
this.requestUpdate();
|
|
99
|
-
}), this._observer.observe(this, {
|
|
92
|
+
}), this._observer.observe(this, {
|
|
93
|
+
childList: !0,
|
|
94
|
+
subtree: !0,
|
|
95
|
+
attributes: !0,
|
|
96
|
+
attributeFilter: ["label", "item-href", "href", "is-current", "current"]
|
|
97
|
+
});
|
|
100
98
|
}
|
|
101
99
|
disconnectedCallback() {
|
|
102
100
|
var e;
|
|
103
101
|
super.disconnectedCallback(), (e = this._observer) == null || e.disconnect();
|
|
104
102
|
}
|
|
105
103
|
firstUpdated() {
|
|
106
|
-
|
|
104
|
+
g(this, m, h).call(this);
|
|
107
105
|
}
|
|
108
106
|
// Sänd event när showAll förändras (för Blazor-bryggan: show-all-changed)
|
|
109
107
|
updated(e) {
|
|
110
|
-
e.has("showAll") && this.dispatchEvent(
|
|
108
|
+
e.has("showAll") && (this.dispatchEvent(
|
|
111
109
|
new CustomEvent("show-all-changed", {
|
|
112
110
|
detail: { showAll: this.showAll },
|
|
113
111
|
bubbles: !0,
|
|
114
112
|
composed: !0
|
|
115
113
|
})
|
|
116
|
-
),
|
|
114
|
+
), this.dispatchEvent(
|
|
115
|
+
new CustomEvent("showallchanged", {
|
|
116
|
+
detail: { showAll: this.showAll, value: this.showAll },
|
|
117
|
+
bubbles: !0,
|
|
118
|
+
composed: !0
|
|
119
|
+
})
|
|
120
|
+
)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && g(this, m, h).call(this);
|
|
117
121
|
}
|
|
118
122
|
mapSpacingToken(e) {
|
|
119
123
|
if (!e) return;
|
|
120
|
-
const
|
|
121
|
-
if (
|
|
122
|
-
return /^\d+$/.test(
|
|
124
|
+
const t = String(e).trim();
|
|
125
|
+
if (t)
|
|
126
|
+
return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
|
|
123
127
|
}
|
|
124
128
|
_onEllipsisClick() {
|
|
125
129
|
this.showAll ? this.showAll = !1 : (this.showAll = !0, this.updateComplete.then(() => {
|
|
126
|
-
var
|
|
127
|
-
const e = (
|
|
128
|
-
".scb-breadcrumb.expanded
|
|
130
|
+
var t;
|
|
131
|
+
const e = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll(
|
|
132
|
+
".scb-breadcrumb.expanded .breadcrumb-item"
|
|
129
133
|
);
|
|
130
|
-
e && (e.forEach((
|
|
131
|
-
|
|
134
|
+
e && (e.forEach((r, n) => {
|
|
135
|
+
r.classList.add("breadcrumb-animate"), r.style.animationDelay = `${n * 60}ms`;
|
|
132
136
|
}), setTimeout(() => {
|
|
133
|
-
e.forEach((
|
|
134
|
-
|
|
137
|
+
e.forEach((r) => {
|
|
138
|
+
r.classList.remove("breadcrumb-animate"), r.style.animationDelay = "";
|
|
135
139
|
});
|
|
136
140
|
}, 600));
|
|
137
141
|
}));
|
|
138
142
|
}
|
|
143
|
+
getItemLabel(e) {
|
|
144
|
+
const t = e.label;
|
|
145
|
+
return typeof t == "string" ? t : e.getAttribute("label") ?? "";
|
|
146
|
+
}
|
|
147
|
+
getItemHref(e) {
|
|
148
|
+
const t = e;
|
|
149
|
+
return typeof t.itemHref == "string" ? t.itemHref : typeof t.href == "string" ? t.href : e.getAttribute("item-href") ?? e.getAttribute("href") ?? "";
|
|
150
|
+
}
|
|
139
151
|
render() {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
152
|
+
const e = Array.from(this.children).filter(
|
|
153
|
+
(s) => s.tagName.toLowerCase() === "scb-breadcrumb-item"
|
|
154
|
+
), t = Math.max(0, e.length - 1);
|
|
155
|
+
let r = t;
|
|
156
|
+
if (e.length > 0) {
|
|
157
|
+
const s = typeof this.currentIndex == "number" && !Number.isNaN(this.currentIndex) ? Math.trunc(this.currentIndex) : void 0;
|
|
158
|
+
if (typeof s == "number" && s >= 0 && s < e.length)
|
|
159
|
+
r = s;
|
|
160
|
+
else
|
|
161
|
+
for (let i = e.length - 1; i >= 0; i--) {
|
|
162
|
+
const c = e[i];
|
|
163
|
+
if (typeof c.isCurrent == "boolean" ? c.isCurrent : e[i].hasAttribute("is-current") || e[i].hasAttribute("current")) {
|
|
164
|
+
r = i;
|
|
165
|
+
break;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
e.forEach((i, c) => {
|
|
169
|
+
i.toggleAttribute("is-current", c === r);
|
|
149
170
|
});
|
|
150
171
|
}
|
|
151
|
-
const
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
172
|
+
const n = e.length > 6 && !this.showAll && r === t, a = [];
|
|
173
|
+
if (n) {
|
|
174
|
+
const s = e.slice(0, 3), i = e.slice(-3);
|
|
175
|
+
s.forEach((c, p) => {
|
|
176
|
+
a.push({ type: "item", item: c, isCurrent: p === r });
|
|
177
|
+
}), a.push({ type: "ellipsis" }), i.forEach((c, p) => {
|
|
178
|
+
const d = e.length - 3 + p;
|
|
179
|
+
a.push({
|
|
180
|
+
type: "item",
|
|
181
|
+
item: c,
|
|
182
|
+
isCurrent: d === r
|
|
183
|
+
});
|
|
184
|
+
});
|
|
185
|
+
} else
|
|
186
|
+
e.forEach((s, i) => {
|
|
187
|
+
a.push({ type: "item", item: s, isCurrent: i === r });
|
|
188
|
+
});
|
|
189
|
+
return u`
|
|
190
|
+
<div class="scb-breadcrumb ${n ? "collapsed" : "expanded"}">
|
|
191
|
+
${a.map((s, i) => {
|
|
192
|
+
const c = i === 0 ? u`` : u`<span class="breadcrumb-separator">/</span>`;
|
|
193
|
+
if (s.type === "ellipsis")
|
|
194
|
+
return u`
|
|
195
|
+
${c}
|
|
196
|
+
<span
|
|
197
|
+
class="breadcrumb-item ellipsis"
|
|
198
|
+
aria-label="Visa alla"
|
|
199
|
+
role="button"
|
|
200
|
+
tabindex="0"
|
|
201
|
+
@click=${this._onEllipsisClick}
|
|
202
|
+
@keydown=${(f) => {
|
|
203
|
+
(f.key === "Enter" || f.key === " ") && this._onEllipsisClick();
|
|
204
|
+
}}
|
|
205
|
+
>
|
|
206
|
+
<md-icon>
|
|
207
|
+
<md-focus-ring></md-focus-ring>
|
|
208
|
+
more_horiz
|
|
209
|
+
</md-icon>
|
|
210
|
+
</span>
|
|
211
|
+
`;
|
|
212
|
+
const p = this.getItemLabel(s.item), d = this.getItemHref(s.item);
|
|
213
|
+
return s.isCurrent ? u`
|
|
214
|
+
${c}
|
|
215
|
+
<span class="breadcrumb-item breadcrumb-current">${p}</span>
|
|
216
|
+
` : u`
|
|
217
|
+
${c}
|
|
218
|
+
<span class="breadcrumb-item">
|
|
219
|
+
<scb-link href="${d}">${p}</scb-link>
|
|
220
|
+
</span>
|
|
221
|
+
`;
|
|
222
|
+
})}
|
|
173
223
|
</div>
|
|
174
224
|
`;
|
|
175
225
|
}
|
|
176
226
|
};
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
const e = this.mapSpacingToken(this.spacing),
|
|
180
|
-
|
|
227
|
+
m = /* @__PURE__ */ new WeakSet();
|
|
228
|
+
h = function() {
|
|
229
|
+
const e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, r = this.mapSpacingToken(this.spacingBottom) ?? e, n = this.mapSpacingToken(this.spacingLeft), a = this.mapSpacingToken(this.spacingRight);
|
|
230
|
+
t ? this.style.setProperty("--scb-breadcrumb-spacing-block-start", t) : this.style.removeProperty("--scb-breadcrumb-spacing-block-start"), r ? this.style.setProperty("--scb-breadcrumb-spacing-block-end", r) : this.style.removeProperty("--scb-breadcrumb-spacing-block-end"), n ? this.style.setProperty("--scb-breadcrumb-spacing-inline-start", n) : this.style.removeProperty("--scb-breadcrumb-spacing-inline-start"), a ? this.style.setProperty("--scb-breadcrumb-spacing-inline-end", a) : this.style.removeProperty("--scb-breadcrumb-spacing-inline-end");
|
|
181
231
|
};
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
],
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
],
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
],
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
],
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
],
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
],
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
],
|
|
232
|
+
l([
|
|
233
|
+
b({ type: Boolean, attribute: "show-all", reflect: !0 })
|
|
234
|
+
], o.prototype, "showAll", 2);
|
|
235
|
+
l([
|
|
236
|
+
b({ type: Number, attribute: "current-index", reflect: !0 })
|
|
237
|
+
], o.prototype, "currentIndex", 2);
|
|
238
|
+
l([
|
|
239
|
+
b({ type: String, reflect: !0 })
|
|
240
|
+
], o.prototype, "spacing", 2);
|
|
241
|
+
l([
|
|
242
|
+
b({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
243
|
+
], o.prototype, "spacingTop", 2);
|
|
244
|
+
l([
|
|
245
|
+
b({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
246
|
+
], o.prototype, "spacingBottom", 2);
|
|
247
|
+
l([
|
|
248
|
+
b({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
249
|
+
], o.prototype, "spacingLeft", 2);
|
|
250
|
+
l([
|
|
251
|
+
b({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
252
|
+
], o.prototype, "spacingRight", 2);
|
|
253
|
+
o = l([
|
|
254
|
+
w("scb-breadcrumb")
|
|
255
|
+
], o);
|
|
203
256
|
export {
|
|
204
|
-
|
|
257
|
+
o as SCBBreadcrumb
|
|
205
258
|
};
|