scb-wc-test 0.1.70 → 0.1.71

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.
@@ -1,4 +1,4 @@
1
- import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
1
+ import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
2
2
  <header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
3
3
  <div class="leading">
4
4
  <slot name="leading"></slot>
@@ -151,4 +151,8 @@ import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"..
151
151
  display: flex;
152
152
  align-items: center;
153
153
  }
154
+ .leading {
155
+ display: flex;
156
+ align-items: center;
157
+ }
154
158
  `];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([g("scb-app-bar")],l);
@@ -1,43 +1,72 @@
1
- import{a as c,n,i as p,x as u,t as b}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 a=customElements.define.bind(customElements);customElements.define=function(i,r,t){try{customElements.get(i)||a(i,r,t)}catch(o){var l=String(o||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(e,a,i,r)=>{for(var t=r>1?void 0:r?h(a,i):a,l=e.length-1,o;l>=0;l--)(o=e[l])&&(t=(r?o(a,i,t):o(t))||t);return r&&t&&v(a,i,t),t};let s=class extends p{constructor(){super(...arguments),this.value="",this.label="",this.disabled=!1,this.variant="dot"}updated(){}render(){let e=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(e=this.value.slice(0,4)+"+");const a=this.variant==="value"&&!this.value?"badge-value-empty":"";return this.variant==="dot"&&(e=""),u`
2
- <div class="badge-content"
3
- .value=${this.value}
4
- .label=${this.label}
5
- ?disabled=${this.disabled}
6
- >
7
- <div class="badge ${a}">${e}</div>
1
+ import{a as c,n as l,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,a,o){try{customElements.get(t)||s(t,a,o)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,r=(e,s,t,a)=>{for(var o=a>1?void 0:a?u(s,t):s,n=e.length-1,d;n>=0;n--)(d=e[n])&&(o=(a?d(s,t,o):d(o))||o);return a&&o&&g(s,t,o),o};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.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",a=this.label||(this.variant==="dot"?"Indikator":`Märke: ${e}`);return h`
2
+ <div class="badge-content">
8
3
  <slot></slot>
4
+ <div
5
+ class="badge ${s} ${t}"
6
+ role="status"
7
+ aria-label="${this.variant==="dot",a}"
8
+ aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":e}</div>
9
9
  </div>
10
- `}};s.styles=c`
10
+ `}};i.styles=c`
11
11
  :host {
12
- --scb-badge-top: 0;
13
- --scb-badge-right: 12px;
14
12
  display: block;
15
13
  position: relative;
16
14
  width: fit-content;
15
+ --scb-badge-font-size: var(--scale-01);
16
+ --scb-badge-line-height: 100%;
17
+ --scb-badge-relative-gap: 0px;
18
+ --scb-badge-background-color: var(--md-sys-color-error);
19
+ --scb-badge-color: var(--md-sys-color-on-error);
20
+ --scb-badge-width: 8px;
21
+ --scb-badge-height: 8px;
22
+ }
23
+ :host([variant="value"]) .badge {
24
+ width: fit-content;
25
+ padding: 6px;
26
+ }
27
+ :host([variant="value"]) .badge.badge-value-empty{
28
+ width: var(--scb-badge-width);
29
+ padding: var(--spacing-2);
30
+ }
31
+ :host([hidden]) .badge {
32
+ display: none;
33
+ }
34
+ .badge {
35
+ transition: transform 0.25s cubic-bezier(.4,2,.6,1), opacity 0.18s linear;
36
+ will-change: transform, opacity;
37
+ }
38
+ .badge--hide {
39
+ opacity: 0;
40
+ transform: scale(1.3);
41
+ pointer-events: none;
17
42
  }
18
- :host([variant="value"]) .badge {
19
- width: fit-content;
20
- padding: 6px;
21
- }
22
- :host([variant="value"]) .badge.badge-value-empty{
23
- width: 8px;
24
- padding: 4px;
25
- }
26
43
  .badge{
27
- background-color: var(--md-sys-color-error);
28
- color: var(--md-sys-color-on-error);
29
- font-size: 12px;
30
- line-height: 100%; /* 150% */
31
- letter-spacing: var(--md-sys-typescale-label-medium-tracking);
32
- border-radius: 9999px;
33
- display: flex;
34
- align-items: center;
35
- justify-content: center;
36
- width: 8px;
37
- height: 8px;
38
- position: absolute;
39
- top: var(--scb-badge-top);
40
- left: calc(100% - var(--scb-badge-right));
41
- white-space: nowrap;
42
- }
43
- `;d([n({type:String,reflect:!0})],s.prototype,"value",2);d([n({type:String,reflect:!0})],s.prototype,"label",2);d([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);d([n({type:String,reflect:!0})],s.prototype,"variant",2);s=d([b("scb-badge")],s);
44
+ background-color: var(--scb-badge-background-color);
45
+ color: var(--scb-badge-color);
46
+ font-size: var(--scb-badge-font-size);
47
+ font-weight: var(--weight-semibold);
48
+ line-height: var(--scb-badge-line-height);
49
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking);
50
+ border-radius: var(--md-sys-shape-corner-full);
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: center;
54
+ width: var(--scb-badge-width);
55
+ height: var(--scb-badge-height);
56
+ position: absolute;
57
+ top: var(--scb-badge-absolute-top);
58
+ left: calc(100% - var(--scb-badge-absolute-right));
59
+ white-space: nowrap;
60
+ }
61
+ :host([position="relative"]) .badge {
62
+ position: relative;
63
+ top: unset;
64
+ left: unset;
65
+ }
66
+ :host([position="relative"]) .badge-content {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ gap: var(--scb-badge-relative-gap);
71
+ }
72
+ `;r([l({type:Boolean,reflect:!0,attribute:"auto-hide"})],i.prototype,"autoHide",2);r([l({type:String,reflect:!0})],i.prototype,"position",2);r([l({type:Number,attribute:"position-top"})],i.prototype,"positionTop",2);r([l({type:Number,attribute:"position-right"})],i.prototype,"positionRight",2);r([l({type:String,reflect:!0})],i.prototype,"value",2);r([l({type:String,reflect:!0})],i.prototype,"label",2);r([l({type:Boolean,reflect:!0})],i.prototype,"hidden",2);r([l({type:String,reflect:!0})],i.prototype,"variant",2);i=r([p("scb-badge")],i);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc-test",
3
- "version": "0.1.70",
3
+ "version": "0.1.71",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -292,5 +292,5 @@
292
292
  },
293
293
  "./mvc/*": "./mvc/*"
294
294
  },
295
- "buildHash": "24ECE43A6671F3197386F295DD01218859A336BAAD7DC1D81CADEFBF56001DA1"
295
+ "buildHash": "4AFCE4286FCF8A151F1ACB56B2D0ABAE1670938C70F8E5DADA1BEA57F7034084"
296
296
  }
@@ -10,7 +10,7 @@ var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (n, a, o
10
10
  };
11
11
  let i = class extends c {
12
12
  constructor() {
13
- super(...arguments), this.title = "App title", this.type = "default", this.position = "default", this.searchSupportingText = "";
13
+ super(...arguments), this.title = "", this.type = "default", this.position = "default", this.searchSupportingText = "";
14
14
  }
15
15
  handleAvatarSlotChange(n) {
16
16
  n.target.assignedElements({ flatten: !0 }).forEach((e) => {
@@ -186,6 +186,10 @@ i.styles = [
186
186
  display: flex;
187
187
  align-items: center;
188
188
  }
189
+ .leading {
190
+ display: flex;
191
+ align-items: center;
192
+ }
189
193
  `
190
194
  ];
191
195
  l([
@@ -4,11 +4,21 @@ import { LitElement } from 'lit';
4
4
  * @slot - Innehåll som badgen placeras på (t.ex. ikon, text)
5
5
  */
6
6
  export declare class ScbBadge extends LitElement {
7
+ private _slotClickHandler;
8
+ autoHide: boolean;
9
+ position: 'absolute' | 'relative';
10
+ positionTop: number;
11
+ positionRight: number;
7
12
  value: string;
8
13
  label: string;
9
- disabled: boolean;
14
+ hidden: boolean;
10
15
  variant: 'dot' | 'value';
11
- updated(): void;
12
16
  static styles: import('lit').CSSResult;
17
+ firstUpdated(): void;
18
+ private _badgeVisible;
19
+ updated(): void;
20
+ connectedCallback(): void;
21
+ disconnectedCallback(): void;
22
+ private _onHideBadge;
13
23
  render(): import('lit-html').TemplateResult<1>;
14
24
  }
@@ -1,81 +1,143 @@
1
- import { css as n, LitElement as c, html as v } from "lit";
2
- import { property as i, customElement as b } from "lit/decorators.js";
3
- var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (a, r, o, l) => {
4
- for (var e = l > 1 ? void 0 : l ? h(r, o) : r, p = a.length - 1, d; p >= 0; p--)
5
- (d = a[p]) && (e = (l ? d(r, o, e) : d(e)) || e);
6
- return l && e && u(r, o, e), e;
1
+ import { css as c, LitElement as b, html as h } from "lit";
2
+ import { property as r, customElement as p } from "lit/decorators.js";
3
+ var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (e, t, a, s) => {
4
+ for (var l = s > 1 ? void 0 : s ? u(t, a) : t, n = e.length - 1, d; n >= 0; n--)
5
+ (d = e[n]) && (l = (s ? d(t, a, l) : d(l)) || l);
6
+ return s && l && g(t, a, l), l;
7
7
  };
8
- let t = class extends c {
8
+ let i = class extends b {
9
9
  constructor() {
10
- super(...arguments), this.value = "", this.label = "", this.disabled = !1, this.variant = "dot";
10
+ super(...arguments), this._slotClickHandler = (e) => {
11
+ var s;
12
+ const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), a = e.target;
13
+ a && a !== t && a.dispatchEvent(new CustomEvent("hide-badge", { bubbles: !0, composed: !0 }));
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 = () => {
15
+ this._badgeVisible = !1, this.requestUpdate();
16
+ };
17
+ }
18
+ firstUpdated() {
19
+ var t;
20
+ const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
21
+ this.autoHide && e && e.addEventListener("click", this._slotClickHandler);
11
22
  }
12
23
  updated() {
24
+ var t;
25
+ const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
26
+ e && (this.autoHide ? e.addEventListener("click", this._slotClickHandler) : e.removeEventListener("click", this._slotClickHandler));
27
+ }
28
+ connectedCallback() {
29
+ super.connectedCallback(), this.addEventListener("hide-badge", this._onHideBadge);
30
+ }
31
+ disconnectedCallback() {
32
+ this.removeEventListener("hide-badge", this._onHideBadge), super.disconnectedCallback();
13
33
  }
14
34
  render() {
15
- let a = this.value;
16
- !isNaN(Number(this.value)) && this.value.length > 4 && (a = this.value.slice(0, 4) + "+");
17
- const r = this.variant === "value" && !this.value ? "badge-value-empty" : "";
18
- return this.variant === "dot" && (a = ""), v`
19
- <div class="badge-content"
20
- .value=${this.value}
21
- .label=${this.label}
22
- ?disabled=${this.disabled}
23
- >
24
- <div class="badge ${r}">${a}</div>
35
+ this.style.setProperty("--scb-badge-absolute-top", this.positionTop + "px"), this.style.setProperty("--scb-badge-absolute-right", this.positionRight + "px");
36
+ let e = this.value;
37
+ !isNaN(Number(this.value)) && this.value.length > 4 && (e = this.value.slice(0, 4) + "+");
38
+ const t = this.variant === "value" && !this.value ? "badge-value-empty" : "", a = this._badgeVisible ? "" : "badge--hide", s = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${e}`);
39
+ return h`
40
+ <div class="badge-content">
25
41
  <slot></slot>
42
+ <div
43
+ class="badge ${t} ${a}"
44
+ role="status"
45
+ aria-label="${this.variant === "dot", s}"
46
+ aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : e}</div>
26
47
  </div>
27
48
  `;
28
49
  }
29
50
  };
30
- t.styles = n`
51
+ i.styles = c`
31
52
  :host {
32
- --scb-badge-top: 0;
33
- --scb-badge-right: 12px;
34
53
  display: block;
35
54
  position: relative;
36
55
  width: fit-content;
56
+ --scb-badge-font-size: var(--scale-01);
57
+ --scb-badge-line-height: 100%;
58
+ --scb-badge-relative-gap: 0px;
59
+ --scb-badge-background-color: var(--md-sys-color-error);
60
+ --scb-badge-color: var(--md-sys-color-on-error);
61
+ --scb-badge-width: 8px;
62
+ --scb-badge-height: 8px;
63
+ }
64
+ :host([variant="value"]) .badge {
65
+ width: fit-content;
66
+ padding: 6px;
67
+ }
68
+ :host([variant="value"]) .badge.badge-value-empty{
69
+ width: var(--scb-badge-width);
70
+ padding: var(--spacing-2);
71
+ }
72
+ :host([hidden]) .badge {
73
+ display: none;
74
+ }
75
+ .badge {
76
+ transition: transform 0.25s cubic-bezier(.4,2,.6,1), opacity 0.18s linear;
77
+ will-change: transform, opacity;
78
+ }
79
+ .badge--hide {
80
+ opacity: 0;
81
+ transform: scale(1.3);
82
+ pointer-events: none;
37
83
  }
38
- :host([variant="value"]) .badge {
39
- width: fit-content;
40
- padding: 6px;
41
- }
42
- :host([variant="value"]) .badge.badge-value-empty{
43
- width: 8px;
44
- padding: 4px;
45
- }
46
84
  .badge{
47
- background-color: var(--md-sys-color-error);
48
- color: var(--md-sys-color-on-error);
49
- font-size: 12px;
50
- line-height: 100%; /* 150% */
51
- letter-spacing: var(--md-sys-typescale-label-medium-tracking);
52
- border-radius: 9999px;
53
- display: flex;
54
- align-items: center;
55
- justify-content: center;
56
- width: 8px;
57
- height: 8px;
58
- position: absolute;
59
- top: var(--scb-badge-top);
60
- left: calc(100% - var(--scb-badge-right));
61
- white-space: nowrap;
85
+ background-color: var(--scb-badge-background-color);
86
+ color: var(--scb-badge-color);
87
+ font-size: var(--scb-badge-font-size);
88
+ font-weight: var(--weight-semibold);
89
+ line-height: var(--scb-badge-line-height);
90
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking);
91
+ border-radius: var(--md-sys-shape-corner-full);
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ width: var(--scb-badge-width);
96
+ height: var(--scb-badge-height);
97
+ position: absolute;
98
+ top: var(--scb-badge-absolute-top);
99
+ left: calc(100% - var(--scb-badge-absolute-right));
100
+ white-space: nowrap;
101
+ }
102
+ :host([position="relative"]) .badge {
103
+ position: relative;
104
+ top: unset;
105
+ left: unset;
106
+ }
107
+ :host([position="relative"]) .badge-content {
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ gap: var(--scb-badge-relative-gap);
62
112
  }
63
113
  `;
64
- s([
65
- i({ type: String, reflect: !0 })
66
- ], t.prototype, "value", 2);
67
- s([
68
- i({ type: String, reflect: !0 })
69
- ], t.prototype, "label", 2);
70
- s([
71
- i({ type: Boolean, reflect: !0 })
72
- ], t.prototype, "disabled", 2);
73
- s([
74
- i({ type: String, reflect: !0 })
75
- ], t.prototype, "variant", 2);
76
- t = s([
77
- b("scb-badge")
78
- ], t);
114
+ o([
115
+ r({ type: Boolean, reflect: !0, attribute: "auto-hide" })
116
+ ], i.prototype, "autoHide", 2);
117
+ o([
118
+ r({ type: String, reflect: !0 })
119
+ ], i.prototype, "position", 2);
120
+ o([
121
+ r({ type: Number, attribute: "position-top" })
122
+ ], i.prototype, "positionTop", 2);
123
+ o([
124
+ r({ type: Number, attribute: "position-right" })
125
+ ], i.prototype, "positionRight", 2);
126
+ o([
127
+ r({ type: String, reflect: !0 })
128
+ ], i.prototype, "value", 2);
129
+ o([
130
+ r({ type: String, reflect: !0 })
131
+ ], i.prototype, "label", 2);
132
+ o([
133
+ r({ type: Boolean, reflect: !0 })
134
+ ], i.prototype, "hidden", 2);
135
+ o([
136
+ r({ type: String, reflect: !0 })
137
+ ], i.prototype, "variant", 2);
138
+ i = o([
139
+ p("scb-badge")
140
+ ], i);
79
141
  export {
80
- t as ScbBadge
142
+ i as ScbBadge
81
143
  };