scb-wc-test 0.1.140 → 0.1.142
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-badge/scb-badge.js +6 -3
- package/mvc/components/scb-card/scb-card.js +53 -25
- package/package.json +2 -2
- package/scb-badge/scb-badge.d.ts +1 -0
- package/scb-badge/scb-badge.js +39 -33
- package/scb-card/scb-card.d.ts +1 -0
- package/scb-card/scb-card.js +169 -131
- package/scb-wc-test.bundle.js +75 -44
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{a as c,n
|
|
1
|
+
import{a as c,n,i as b,x as h,t as p}from"../../vendor/vendor.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(t,o,r){try{customElements.get(t)||s(t,o,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(e,s,t,o)=>{for(var r=o>1?void 0:o?u(s,t):s,l=e.length-1,d;l>=0;l--)(d=e[l])&&(r=(o?d(s,t,r):d(r))||r);return o&&r&&g(s,t,r),r};let i=class extends b{constructor(){super(...arguments),this._slotClickHandler=e=>{const s=this.shadowRoot?.querySelector("slot"),t=e.target;t&&t!==s&&t.dispatchEvent(new CustomEvent("hide-badge",{bubbles:!0,composed:!0}))},this.autoHide=!1,this.sizing="fit-content",this.position="relative",this.positionTop=0,this.positionRight=12,this.value="",this.label="",this.hidden=!1,this.variant="dot",this._badgeVisible=!0,this._onHideBadge=()=>{this._badgeVisible=!1,this.requestUpdate()}}firstUpdated(){const e=this.shadowRoot?.querySelector("slot");this.autoHide&&e&&e.addEventListener("click",this._slotClickHandler)}updated(){const e=this.shadowRoot?.querySelector("slot");e&&(this.autoHide?e.addEventListener("click",this._slotClickHandler):e.removeEventListener("click",this._slotClickHandler))}connectedCallback(){super.connectedCallback(),this.addEventListener("hide-badge",this._onHideBadge)}disconnectedCallback(){this.removeEventListener("hide-badge",this._onHideBadge),super.disconnectedCallback()}render(){this.style.setProperty("--scb-badge-absolute-top",this.positionTop+"px"),this.style.setProperty("--scb-badge-absolute-right",this.positionRight+"px");let e=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(e=this.value.slice(0,4)+"+");const s=this.variant==="value"&&!this.value?"badge-value-empty":"",t=this._badgeVisible?"":"badge--hide",o=this.label||(this.variant==="dot"?"Indikator":`Märke: ${e}`);return h`
|
|
2
2
|
<div class="badge-content">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
<div
|
|
5
5
|
class="badge ${s} ${t}"
|
|
6
6
|
role="status"
|
|
7
|
-
aria-label="${this.variant==="dot",
|
|
7
|
+
aria-label="${this.variant==="dot",o}"
|
|
8
8
|
aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":e}</div>
|
|
9
9
|
</div>
|
|
10
10
|
`}};i.styles=c`
|
|
@@ -20,6 +20,9 @@ import{a as c,n as l,i as b,x as h,t as p}from"../../vendor/vendor.js";(function
|
|
|
20
20
|
--scb-badge-width: 8px;
|
|
21
21
|
--scb-badge-height: 8px;
|
|
22
22
|
}
|
|
23
|
+
:host([sizing="fit-parent"]) {
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
23
26
|
:host([variant="value"]) .badge {
|
|
24
27
|
width: fit-content;
|
|
25
28
|
padding: 6px;
|
|
@@ -69,4 +72,4 @@ import{a as c,n as l,i as b,x as h,t as p}from"../../vendor/vendor.js";(function
|
|
|
69
72
|
justify-content: center;
|
|
70
73
|
gap: var(--scb-badge-relative-gap);
|
|
71
74
|
}
|
|
72
|
-
`;
|
|
75
|
+
`;a([n({type:Boolean,reflect:!0,attribute:"auto-hide"})],i.prototype,"autoHide",2);a([n({type:String,reflect:!0})],i.prototype,"sizing",2);a([n({type:String,reflect:!0})],i.prototype,"position",2);a([n({type:Number,attribute:"position-top"})],i.prototype,"positionTop",2);a([n({type:Number,attribute:"position-right"})],i.prototype,"positionRight",2);a([n({type:String,reflect:!0})],i.prototype,"value",2);a([n({type:String,reflect:!0})],i.prototype,"label",2);a([n({type:Boolean,reflect:!0})],i.prototype,"hidden",2);a([n({type:String,reflect:!0})],i.prototype,"variant",2);i=a([p("scb-badge")],i);
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as
|
|
2
|
+
import{_ as v}from"../../vendor/preload-helper.js";import{a as x,n as o,i as $,x as a,t as _}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.js";import"../scb-list/scb-list-item.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(s,c,n){try{customElements.get(s)||t(s,c,n)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var k=Object.defineProperty,z=Object.getOwnPropertyDescriptor,f=e=>{throw TypeError(e)},r=(e,t,s,c)=>{for(var n=c>1?void 0:c?z(t,s):t,l=e.length-1,d;l>=0;l--)(d=e[l])&&(n=(c?d(t,s,n):d(n))||n);return c&&n&&k(t,s,n),n},w=(e,t,s)=>t.has(e)||f("Cannot "+s),S=(e,t,s)=>t.has(e)?f("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),y=(e,t,s)=>(w(e,t,"access private method"),s),u,b;let i=class extends ${constructor(){super(...arguments),S(this,u),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.comments=0,this.commentsHref="#",this.likesText="",this.likes=0,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing="",this.spacingTop="",this.spacingBottom="",this.__onImgLoad=e=>{const t=e.currentTarget.closest(".media");t&&t.classList.add("is-loaded")},this.__onKeyDown=e=>{const t=(this.cardHref||"").trim();t&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),window.location.assign(t))},this.__handleHrefNavigation=e=>{const t=(this.cardHref||"").trim();!t||e.button!==0||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.target?.closest("a, button, input, select, textarea, summary")||window.location.assign(t)}}get __isLinkCard(){if(!(this.cardHref||"").trim())return!1;const t=(this.type||"").toLowerCase();return t==="standard"||t==="social"}__calcAspectWH(e){const t=(e||"").trim();if(!t)return{w:640,h:360};const s=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):t.includes("x")?t.split("x"):null;if(s&&s.length===2){const n=Number(s[0]),l=Number(s[1]);if(n>0&&l>0)return{w:n,h:l}}const c=Number(t);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return a`
|
|
3
3
|
<div class="media">
|
|
4
4
|
<slot name="media">
|
|
5
5
|
<scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
|
|
6
6
|
</slot>
|
|
7
7
|
</div>
|
|
8
|
-
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,s=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!s){const
|
|
9
|
-
<div class="media ${l}" style="${
|
|
8
|
+
`;if(this.mediaHref||this.mediaSrcset){let t=Number(this.mediaWidth)||0,s=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!t||!s){const p=this.__calcAspectWH(c||"16/9");t||(t=p.w),s||(s=p.h)}const n=`aspect-ratio:${c||`${t}/${s}`};`,l=this.mediaPlaceholder?"has-ph":"",d=this.mediaFit||"cover",m=this.mediaPosition||"center";return a`
|
|
9
|
+
<div class="media ${l}" style="${n}">
|
|
10
10
|
<slot name="media-sources"></slot>
|
|
11
11
|
<img
|
|
12
12
|
src="${this.mediaHref||""}"
|
|
@@ -16,15 +16,15 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as y,n,i as f,x as a
|
|
|
16
16
|
loading="${this.mediaLoading}"
|
|
17
17
|
decoding="${this.mediaDecoding}"
|
|
18
18
|
fetchpriority="${this.mediaFetchPriority}"
|
|
19
|
-
style="object-fit:${d};object-position:${
|
|
19
|
+
style="object-fit:${d};object-position:${m};"
|
|
20
20
|
width="${t}"
|
|
21
21
|
height="${s}"
|
|
22
22
|
@load=${this.__onImgLoad}
|
|
23
23
|
/>
|
|
24
24
|
</div>
|
|
25
|
-
`}return null}mapSpacingToken(
|
|
25
|
+
`}return null}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}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",t=this.type==="list"?"vertical":this.direction?this.direction.toLowerCase():"",s=this.__isLinkCard,c=s?"clickable":"",n=this.date instanceof Date?this.date.toISOString().slice(0,10):this.date||"",l=(p=!1)=>p?a`<span class="title">${this.title}</span><md-icon>arrow_forward</md-icon>`:a`<span class="title">${this.title}</span>`,d=()=>this.__mediaTemplate(),m=p=>a`
|
|
26
26
|
<div
|
|
27
|
-
class="scb-card ${
|
|
27
|
+
class="scb-card ${e} ${t} ${c}"
|
|
28
28
|
@click=${s?this.__handleHrefNavigation:null}
|
|
29
29
|
@keydown=${s?this.__onKeyDown:null}
|
|
30
30
|
style="cursor:${s?"pointer":"default"};"
|
|
@@ -34,85 +34,99 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as y,n,i as f,x as a
|
|
|
34
34
|
>
|
|
35
35
|
${s?a`<md-ripple></md-ripple>`:""}
|
|
36
36
|
${d()}
|
|
37
|
-
${
|
|
37
|
+
${p}
|
|
38
38
|
</div>
|
|
39
39
|
${s?a`<md-focus-ring></md-focus-ring>`:""}
|
|
40
|
-
`;switch(this.type){case"standard":return
|
|
40
|
+
`;switch(this.type){case"standard":return m(a`
|
|
41
41
|
<div class="full-content">
|
|
42
42
|
<div class="top-content">
|
|
43
43
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
44
44
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
45
45
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
46
|
-
${
|
|
46
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
|
-
`);case"list":return
|
|
49
|
+
`);case"list":return m(a`
|
|
50
50
|
<div class="full-content">
|
|
51
51
|
<div class="top-content">
|
|
52
52
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
53
53
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
54
54
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
55
|
-
${
|
|
55
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
56
56
|
</div>
|
|
57
57
|
<div class="content list">
|
|
58
58
|
<slot></slot>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
|
-
`);case"social":
|
|
61
|
+
`);case"social":const p=this.commentsHref,g=h=>{h.stopPropagation()};return m(a`
|
|
62
62
|
<div class="full-content">
|
|
63
63
|
<div class="top-content">
|
|
64
64
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
65
65
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
66
66
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
67
|
-
${
|
|
67
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
68
68
|
</div>
|
|
69
69
|
<div class="content">
|
|
70
70
|
<div class="social-metrics">
|
|
71
|
-
|
|
71
|
+
${p!==""?a`
|
|
72
|
+
<a class="comments" href="${p}" tabindex="0" @click=${g}
|
|
72
73
|
><md-icon>mode_comment</md-icon>
|
|
73
|
-
<span>${this.commentsText}: ${this.comments}</span></
|
|
74
|
+
<span>${this.commentsText}: ${this.comments}</span></a
|
|
74
75
|
>
|
|
76
|
+
`:a`
|
|
77
|
+
<span class="comments" href="${p}" tabindex="0" @click=${g}
|
|
78
|
+
><md-icon>mode_comment</md-icon>
|
|
79
|
+
<span>${this.commentsText}: ${this.comments}</span></span
|
|
80
|
+
>`}
|
|
81
|
+
|
|
75
82
|
<span class="likes"
|
|
76
|
-
|
|
77
|
-
|
|
83
|
+
style="cursor:pointer;"
|
|
84
|
+
tabindex="0"
|
|
85
|
+
@click=${h=>{h.stopPropagation(),this.dispatchEvent(new CustomEvent("like-click",{bubbles:!0,composed:!0}))}}
|
|
86
|
+
@keydown=${h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),h.stopPropagation(),this.dispatchEvent(new CustomEvent("like-click",{bubbles:!0,composed:!0})))}}
|
|
87
|
+
role="button"
|
|
88
|
+
aria-label="${this.likesText||"Like"}"
|
|
78
89
|
>
|
|
90
|
+
<md-icon>thumb_up</md-icon>
|
|
91
|
+
<span>${this.likesText}: ${this.likes}</span>
|
|
92
|
+
</span>
|
|
79
93
|
</div>
|
|
80
94
|
</div>
|
|
81
95
|
</div>
|
|
82
|
-
`);case"link":return
|
|
96
|
+
`);case"link":return m(a`
|
|
83
97
|
<div class="full-content">
|
|
84
98
|
<div class="top-content">
|
|
85
99
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
86
100
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
87
101
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
88
|
-
${
|
|
102
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
89
103
|
</div>
|
|
90
104
|
<div class="content links">
|
|
91
105
|
<slot></slot>
|
|
92
106
|
</div>
|
|
93
107
|
</div>
|
|
94
|
-
`);case"action":return
|
|
108
|
+
`);case"action":return m(a`
|
|
95
109
|
<div class="full-content">
|
|
96
110
|
<div class="top-content">
|
|
97
111
|
${this.title?a`<div class="header"><span class="title">${this.title}</span></div>`:""}
|
|
98
112
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
99
113
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
100
|
-
${
|
|
114
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
101
115
|
</div>
|
|
102
116
|
<div class="content actions">
|
|
103
117
|
<slot></slot>
|
|
104
118
|
</div>
|
|
105
119
|
</div>
|
|
106
|
-
`);default:return
|
|
120
|
+
`);default:return m(a`
|
|
107
121
|
<div class="full-content">
|
|
108
122
|
<div class="top-content">
|
|
109
123
|
${this.title?a`<div class="header">${l(s)}</div>`:""}
|
|
110
124
|
${this.subtitle?a`<div class="sub-label">${this.subtitle}</div>`:""}
|
|
111
125
|
${this.supportingText?a`<div class="supporting-text">${this.supportingText}</div>`:""}
|
|
112
|
-
${
|
|
126
|
+
${n?a`<div class="date">${n}</div>`:""}
|
|
113
127
|
</div>
|
|
114
128
|
</div>
|
|
115
|
-
`)}}updated(
|
|
129
|
+
`)}}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.inlineSize=this.width:this.style.removeProperty("inline-size")),e.has("maxWidth")&&(this.maxWidth?this.style.maxInlineSize=this.maxWidth:this.style.removeProperty("max-inline-size")),e.has("height")&&(this.height?this.style.blockSize=this.height:this.style.removeProperty("block-size")),e.has("maxHeight")&&(this.maxHeight?this.style.maxBlockSize=this.maxHeight:this.style.removeProperty("max-block-size")),e.has("type")&&(this.type==="list"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")),this.style.setProperty("--scb-card-media-fit",this.mediaFit||"cover"),this.style.setProperty("--scb-card-media-position",this.mediaPosition||"center"),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&y(this,u,b).call(this)}async firstUpdated(e){i.__iconLoaded||(await v(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),i.__iconLoaded=!0),i.__rippleLoaded||(await v(()=>import("../../vendor/vendor-material.js").then(t=>t.r),__vite__mapDeps([0,1]),import.meta.url),i.__rippleLoaded=!0),y(this,u,b).call(this)}};u=new WeakSet;b=function(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,s=this.mapSpacingToken(this.spacingBottom)??e;t?this.style.setProperty("--scb-card-spacing-block-start",t):this.style.removeProperty("--scb-card-spacing-block-start"),s?this.style.setProperty("--scb-card-spacing-block-end",s):this.style.removeProperty("--scb-card-spacing-block-end")};i.__iconLoaded=!1;i.__rippleLoaded=!1;i.styles=x`
|
|
116
130
|
:host {
|
|
117
131
|
display: block;
|
|
118
132
|
box-sizing: border-box;
|
|
@@ -218,6 +232,20 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as y,n,i as f,x as a
|
|
|
218
232
|
.scb-card.clickable {
|
|
219
233
|
cursor: pointer;
|
|
220
234
|
}
|
|
235
|
+
.social-metrics a.comments {
|
|
236
|
+
color: var(--md-sys-color-primary);
|
|
237
|
+
text-decoration: none;
|
|
238
|
+
border-radius: 4px;
|
|
239
|
+
cursor: pointer;
|
|
240
|
+
outline: none;
|
|
241
|
+
}
|
|
242
|
+
.social-metrics a.comments:hover,
|
|
243
|
+
.social-metrics a.comments:focus {
|
|
244
|
+
color: var(--md-sys-color-primary);
|
|
245
|
+
text-decoration: var(--scb-link-decoration, underline);
|
|
246
|
+
text-underline-offset: var(--scb-link-underline-offset, .22em);
|
|
247
|
+
text-decoration-thickness: var(--scb-link-underline-thickness, 1px);
|
|
248
|
+
}
|
|
221
249
|
|
|
222
250
|
md-ripple {
|
|
223
251
|
position: absolute;
|
|
@@ -417,4 +445,4 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as y,n,i as f,x as a
|
|
|
417
445
|
.scb-card.filled .content.list ::slotted(scb-list) {
|
|
418
446
|
--scb-list-bg: var(--md-sys-color-surface-dim);
|
|
419
447
|
}
|
|
420
|
-
`;r([
|
|
448
|
+
`;r([o({type:String,reflect:!0})],i.prototype,"type",2);r([o({type:String,reflect:!0})],i.prototype,"variant",2);r([o({type:String,reflect:!0})],i.prototype,"direction",2);r([o({type:String,attribute:"media-type"})],i.prototype,"mediaType",2);r([o({type:String,attribute:"media-href"})],i.prototype,"mediaHref",2);r([o({type:String,attribute:"media-alt"})],i.prototype,"mediaAlt",2);r([o({type:String,attribute:"media-srcset"})],i.prototype,"mediaSrcset",2);r([o({type:String,attribute:"media-sizes"})],i.prototype,"mediaSizes",2);r([o({type:String,attribute:"media-loading"})],i.prototype,"mediaLoading",2);r([o({type:String,attribute:"media-decoding"})],i.prototype,"mediaDecoding",2);r([o({type:String,attribute:"media-fetchpriority"})],i.prototype,"mediaFetchPriority",2);r([o({type:String,attribute:"media-fit"})],i.prototype,"mediaFit",2);r([o({type:String,attribute:"media-position"})],i.prototype,"mediaPosition",2);r([o({type:String,attribute:"media-width"})],i.prototype,"mediaWidth",2);r([o({type:String,attribute:"media-height"})],i.prototype,"mediaHeight",2);r([o({type:String,attribute:"media-aspect"})],i.prototype,"mediaAspect",2);r([o({type:Boolean,attribute:"media-placeholder"})],i.prototype,"mediaPlaceholder",2);r([o({type:String,attribute:"card-href",reflect:!0})],i.prototype,"cardHref",2);r([o({type:String,reflect:!0})],i.prototype,"title",2);r([o({type:String,reflect:!0})],i.prototype,"subtitle",2);r([o({type:String,attribute:"supporting-text",reflect:!0})],i.prototype,"supportingText",2);r([o({type:Date,reflect:!0})],i.prototype,"date",2);r([o({type:String,attribute:"social-comments-text",reflect:!0})],i.prototype,"commentsText",2);r([o({type:Number,attribute:"social-comments",reflect:!0})],i.prototype,"comments",2);r([o({type:String,attribute:"social-comments-href",reflect:!0})],i.prototype,"commentsHref",2);r([o({type:String,attribute:"social-likes-text",reflect:!0})],i.prototype,"likesText",2);r([o({type:Number,attribute:"social-likes",reflect:!0})],i.prototype,"likes",2);r([o({type:String,reflect:!0})],i.prototype,"sizing",2);r([o({type:String,reflect:!0})],i.prototype,"width",2);r([o({type:String,reflect:!0,attribute:"max-width"})],i.prototype,"maxWidth",2);r([o({type:String,reflect:!0})],i.prototype,"height",2);r([o({type:String,reflect:!0,attribute:"max-height"})],i.prototype,"maxHeight",2);r([o({type:String,reflect:!0})],i.prototype,"spacing",2);r([o({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);r([o({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);i=r([_("scb-card")],i);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.142",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -365,5 +365,5 @@
|
|
|
365
365
|
},
|
|
366
366
|
"./mvc/*": "./mvc/*"
|
|
367
367
|
},
|
|
368
|
-
"buildHash": "
|
|
368
|
+
"buildHash": "CBB24AFEA7148EBB66D22C2771E26F54DF4F09651EDBB24B8776E7E253EC3348"
|
|
369
369
|
}
|
package/scb-badge/scb-badge.d.ts
CHANGED
package/scb-badge/scb-badge.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { css as c, LitElement as
|
|
2
|
-
import { property as r, customElement as
|
|
3
|
-
var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor,
|
|
4
|
-
for (var l = s > 1 ? void 0 : s ? u(
|
|
5
|
-
(d =
|
|
6
|
-
return s && l && g(
|
|
1
|
+
import { css as c, LitElement as p, html as b } from "lit";
|
|
2
|
+
import { property as r, customElement as h } from "lit/decorators.js";
|
|
3
|
+
var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (t, e, o, s) => {
|
|
4
|
+
for (var l = s > 1 ? void 0 : s ? u(e, o) : e, n = t.length - 1, d; n >= 0; n--)
|
|
5
|
+
(d = t[n]) && (l = (s ? d(e, o, l) : d(l)) || l);
|
|
6
|
+
return s && l && g(e, o, l), l;
|
|
7
7
|
};
|
|
8
|
-
let i = class extends
|
|
8
|
+
let i = class extends p {
|
|
9
9
|
constructor() {
|
|
10
|
-
super(...arguments), this._slotClickHandler = (
|
|
10
|
+
super(...arguments), this._slotClickHandler = (t) => {
|
|
11
11
|
var s;
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
}, this.autoHide = !1, this.position = "relative", this.positionTop = 0, this.positionRight = 12, this.value = "", this.label = "", this.hidden = !1, this.variant = "dot", this._badgeVisible = !0, this._onHideBadge = () => {
|
|
12
|
+
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), o = t.target;
|
|
13
|
+
o && o !== e && o.dispatchEvent(new CustomEvent("hide-badge", { bubbles: !0, composed: !0 }));
|
|
14
|
+
}, this.autoHide = !1, this.sizing = "fit-content", this.position = "relative", this.positionTop = 0, this.positionRight = 12, this.value = "", this.label = "", this.hidden = !1, this.variant = "dot", this._badgeVisible = !0, this._onHideBadge = () => {
|
|
15
15
|
this._badgeVisible = !1, this.requestUpdate();
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
firstUpdated() {
|
|
19
|
-
var
|
|
20
|
-
const
|
|
21
|
-
this.autoHide &&
|
|
19
|
+
var e;
|
|
20
|
+
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
|
|
21
|
+
this.autoHide && t && t.addEventListener("click", this._slotClickHandler);
|
|
22
22
|
}
|
|
23
23
|
updated() {
|
|
24
|
-
var
|
|
25
|
-
const
|
|
26
|
-
|
|
24
|
+
var e;
|
|
25
|
+
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
|
|
26
|
+
t && (this.autoHide ? t.addEventListener("click", this._slotClickHandler) : t.removeEventListener("click", this._slotClickHandler));
|
|
27
27
|
}
|
|
28
28
|
connectedCallback() {
|
|
29
29
|
super.connectedCallback(), this.addEventListener("hide-badge", this._onHideBadge);
|
|
@@ -33,17 +33,17 @@ let i = class extends b {
|
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
35
|
this.style.setProperty("--scb-badge-absolute-top", this.positionTop + "px"), this.style.setProperty("--scb-badge-absolute-right", this.positionRight + "px");
|
|
36
|
-
let
|
|
37
|
-
!isNaN(Number(this.value)) && this.value.length > 4 && (
|
|
38
|
-
const
|
|
39
|
-
return
|
|
36
|
+
let t = this.value;
|
|
37
|
+
!isNaN(Number(this.value)) && this.value.length > 4 && (t = this.value.slice(0, 4) + "+");
|
|
38
|
+
const e = this.variant === "value" && !this.value ? "badge-value-empty" : "", o = this._badgeVisible ? "" : "badge--hide", s = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${t}`);
|
|
39
|
+
return b`
|
|
40
40
|
<div class="badge-content">
|
|
41
41
|
<slot></slot>
|
|
42
42
|
<div
|
|
43
|
-
class="badge ${
|
|
43
|
+
class="badge ${e} ${o}"
|
|
44
44
|
role="status"
|
|
45
45
|
aria-label="${this.variant === "dot", s}"
|
|
46
|
-
aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" :
|
|
46
|
+
aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : t}</div>
|
|
47
47
|
</div>
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
@@ -61,6 +61,9 @@ i.styles = c`
|
|
|
61
61
|
--scb-badge-width: 8px;
|
|
62
62
|
--scb-badge-height: 8px;
|
|
63
63
|
}
|
|
64
|
+
:host([sizing="fit-parent"]) {
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
64
67
|
:host([variant="value"]) .badge {
|
|
65
68
|
width: fit-content;
|
|
66
69
|
padding: 6px;
|
|
@@ -111,32 +114,35 @@ i.styles = c`
|
|
|
111
114
|
gap: var(--scb-badge-relative-gap);
|
|
112
115
|
}
|
|
113
116
|
`;
|
|
114
|
-
|
|
117
|
+
a([
|
|
115
118
|
r({ type: Boolean, reflect: !0, attribute: "auto-hide" })
|
|
116
119
|
], i.prototype, "autoHide", 2);
|
|
117
|
-
|
|
120
|
+
a([
|
|
121
|
+
r({ type: String, reflect: !0 })
|
|
122
|
+
], i.prototype, "sizing", 2);
|
|
123
|
+
a([
|
|
118
124
|
r({ type: String, reflect: !0 })
|
|
119
125
|
], i.prototype, "position", 2);
|
|
120
|
-
|
|
126
|
+
a([
|
|
121
127
|
r({ type: Number, attribute: "position-top" })
|
|
122
128
|
], i.prototype, "positionTop", 2);
|
|
123
|
-
|
|
129
|
+
a([
|
|
124
130
|
r({ type: Number, attribute: "position-right" })
|
|
125
131
|
], i.prototype, "positionRight", 2);
|
|
126
|
-
|
|
132
|
+
a([
|
|
127
133
|
r({ type: String, reflect: !0 })
|
|
128
134
|
], i.prototype, "value", 2);
|
|
129
|
-
|
|
135
|
+
a([
|
|
130
136
|
r({ type: String, reflect: !0 })
|
|
131
137
|
], i.prototype, "label", 2);
|
|
132
|
-
|
|
138
|
+
a([
|
|
133
139
|
r({ type: Boolean, reflect: !0 })
|
|
134
140
|
], i.prototype, "hidden", 2);
|
|
135
|
-
|
|
141
|
+
a([
|
|
136
142
|
r({ type: String, reflect: !0 })
|
|
137
143
|
], i.prototype, "variant", 2);
|
|
138
|
-
i =
|
|
139
|
-
|
|
144
|
+
i = a([
|
|
145
|
+
h("scb-badge")
|
|
140
146
|
], i);
|
|
141
147
|
export {
|
|
142
148
|
i as ScbBadge
|
package/scb-card/scb-card.d.ts
CHANGED