scb-wc-test 0.1.11 → 0.1.13

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.
Files changed (95) hide show
  1. package/all.js +2 -0
  2. package/index.d.ts +1 -0
  3. package/index.js +34 -32
  4. package/mvc/components/all.js +1 -0
  5. package/mvc/components/scb-accordion/scb-accordion-item.js +21 -61
  6. package/mvc/components/scb-app-bar/scb-app-bar.js +1 -1
  7. package/mvc/components/scb-avatar/scb-avatar.js +1 -1
  8. package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +1 -1
  9. package/mvc/components/scb-breadcrumb/scb-breadcrumb.js +1 -1
  10. package/mvc/components/scb-button/scb-button.js +1 -1
  11. package/mvc/components/scb-calendar-card/scb-calendar-card.js +165 -126
  12. package/mvc/components/scb-card/scb-card.js +223 -217
  13. package/mvc/components/scb-checkbox/scb-checkbox-group.js +1 -1
  14. package/mvc/components/scb-checkbox/scb-checkbox.js +9 -11
  15. package/mvc/components/scb-chips/scb-chip.js +1 -1
  16. package/mvc/components/scb-dialog/scb-dialog.js +2 -2
  17. package/mvc/components/scb-divider/scb-divider.js +43 -53
  18. package/mvc/components/scb-drawer/scb-drawer-item.js +2 -2
  19. package/mvc/components/scb-drawer/scb-drawer-section.js +4 -4
  20. package/mvc/components/scb-drawer/scb-drawer.js +1 -1
  21. package/mvc/components/scb-drawer/scb-sub-drawer.js +1 -1
  22. package/mvc/components/scb-fact-card/scb-fact-card-content.js +1 -1
  23. package/mvc/components/scb-fact-card/scb-fact-card.js +68 -55
  24. package/mvc/components/scb-footer/scb-footer-section.js +2 -2
  25. package/mvc/components/scb-footer/scb-footer.js +1 -1
  26. package/mvc/components/scb-grid/scb-grid-item.js +5 -3
  27. package/mvc/components/scb-grid/scb-grid.js +27 -10
  28. package/mvc/components/scb-grid/scb-stack.js +10 -6
  29. package/mvc/components/scb-header/scb-header-drawer-group.js +1 -1
  30. package/mvc/components/scb-header/scb-header-drawer-item.js +1 -1
  31. package/mvc/components/scb-header/scb-header-tab.js +1 -1
  32. package/mvc/components/scb-header/scb-header-utility.js +1 -1
  33. package/mvc/components/scb-header/scb-header.js +53 -49
  34. package/mvc/components/scb-icon-button/scb-icon-button.js +45 -80
  35. package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +84 -58
  36. package/mvc/components/scb-link/scb-link.js +39 -16
  37. package/mvc/components/scb-list/scb-list-item.js +115 -37
  38. package/mvc/components/scb-list/scb-list.js +16 -7
  39. package/mvc/components/scb-menu/scb-menu-item.js +1 -1
  40. package/mvc/components/scb-menu/scb-menu.js +1 -1
  41. package/mvc/components/scb-menu/scb-sub-menu.js +1 -1
  42. package/mvc/components/scb-notification/scb-notification.js +1 -1
  43. package/mvc/components/scb-notification-card/scb-notification-card.js +187 -0
  44. package/mvc/components/scb-progress-indicator/scb-progress-indicator.js +1 -1
  45. package/mvc/components/scb-radio-button/scb-radio-button.js +29 -36
  46. package/mvc/components/scb-radio-button/scb-radio-group.js +1 -1
  47. package/mvc/components/scb-search/scb-search.js +48 -37
  48. package/mvc/components/scb-snackbar/scb-snackbar.js +8 -8
  49. package/mvc/components/scb-status-pill/scb-status-pill.js +1 -1
  50. package/mvc/components/scb-switch/scb-switch.js +1 -1
  51. package/mvc/components/scb-tabs/scb-primary-tab.js +1 -1
  52. package/mvc/components/scb-tabs/scb-secondary-tab.js +1 -1
  53. package/mvc/components/scb-tabs/scb-tabs.js +1 -1
  54. package/mvc/components/scb-textfield/scb-textfield.js +1 -1
  55. package/mvc/components/scb-toc/scb-toc-item.js +1 -1
  56. package/mvc/components/scb-toc/scb-toc.js +2 -2
  57. package/mvc/components/scb-tooltip/scb-tooltip.js +1 -1
  58. package/mvc/vendor/vendor-material.js +232 -312
  59. package/mvc/vendor/vendor.js +19 -23
  60. package/package.json +6 -2
  61. package/scb-accordion/scb-accordion-item.js +47 -98
  62. package/scb-calendar-card/scb-calendar-card.d.ts +6 -4
  63. package/scb-calendar-card/scb-calendar-card.js +207 -154
  64. package/scb-card/scb-card.d.ts +8 -3
  65. package/scb-card/scb-card.js +265 -250
  66. package/scb-checkbox/scb-checkbox.d.ts +1 -0
  67. package/scb-checkbox/scb-checkbox.js +56 -49
  68. package/scb-divider/scb-divider.d.ts +16 -4
  69. package/scb-divider/scb-divider.js +63 -69
  70. package/scb-fact-card/scb-fact-card.d.ts +8 -7
  71. package/scb-fact-card/scb-fact-card.js +100 -78
  72. package/scb-grid/scb-grid-item.d.ts +7 -2
  73. package/scb-grid/scb-grid-item.js +47 -33
  74. package/scb-grid/scb-grid.d.ts +7 -3
  75. package/scb-grid/scb-grid.js +57 -21
  76. package/scb-grid/scb-stack.d.ts +5 -1
  77. package/scb-grid/scb-stack.js +57 -31
  78. package/scb-header/scb-header.d.ts +1 -2
  79. package/scb-header/scb-header.js +154 -162
  80. package/scb-icon-button/scb-icon-button.d.ts +15 -11
  81. package/scb-icon-button/scb-icon-button.js +149 -132
  82. package/scb-keyfigure-card/scb-keyfigure-card.d.ts +6 -1
  83. package/scb-keyfigure-card/scb-keyfigure-card.js +139 -93
  84. package/scb-link/scb-link.d.ts +1 -0
  85. package/scb-link/scb-link.js +65 -38
  86. package/scb-list/scb-list-item.d.ts +8 -5
  87. package/scb-list/scb-list-item.js +183 -73
  88. package/scb-list/scb-list.d.ts +5 -0
  89. package/scb-list/scb-list.js +71 -21
  90. package/scb-notification-card/scb-notification-card.d.ts +18 -0
  91. package/scb-notification-card/scb-notification-card.js +264 -0
  92. package/scb-radio-button/scb-radio-button.js +46 -53
  93. package/scb-search/scb-search.d.ts +8 -0
  94. package/scb-search/scb-search.js +176 -139
  95. package/scb-wc-test.bundle.js +1870 -1546
@@ -1,43 +1,47 @@
1
- import { css as y, LitElement as x, nothing as b, html as d } from "lit";
2
- import { property as h, customElement as A } from "lit/decorators.js";
1
+ import { css as y, LitElement as x, nothing as b, html as u } from "lit";
2
+ import { property as h, customElement as w } from "lit/decorators.js";
3
3
  import "../scb-list/scb-list.js";
4
4
  import "@material/web/ripple/ripple.js";
5
5
  import "@material/web/icon/icon.js";
6
- var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (e, t, i, n) => {
7
- for (var s = n > 1 ? void 0 : n ? I(t, i) : t, r = e.length - 1, a; r >= 0; r--)
8
- (a = e[r]) && (s = (n ? a(t, i, s) : a(s)) || s);
9
- return n && s && w(t, i, s), s;
6
+ import "@material/web/focus/md-focus-ring.js";
7
+ var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (t, e, s, r) => {
8
+ for (var i = r > 1 ? void 0 : r ? I(e, s) : e, n = t.length - 1, o; n >= 0; n--)
9
+ (o = t[n]) && (i = (r ? o(e, s, i) : o(i)) || i);
10
+ return r && i && A(e, s, i), i;
10
11
  };
11
- let S = 0, o = class extends x {
12
+ let S = 0, a = class extends x {
12
13
  constructor() {
13
- super(...arguments), this.supportingText = "Hinted search text", this.value = "", this.size = "default", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++S}`, this._kbMode = !1;
14
+ super(...arguments), this.supportingText = "Hinted search text", this.value = "", this.size = "default", this.fullScreen = !1, this._inputFocused = !1, this._visibleSuggestions = 0, this._activeIndex = -1, this._listboxId = `scb-search-listbox-${++S}`, this._kbMode = !1, this._listScrollHandler = () => {
15
+ const t = this._getActiveItem();
16
+ this._kbMode && t && this._positionOptionRing(t);
17
+ };
14
18
  }
15
19
  connectedCallback() {
16
- super.connectedCallback();
20
+ super.connectedCallback(), this._onWindowResize = this._onWindowResize.bind(this), window.addEventListener("resize", this._onWindowResize, { passive: !0 });
17
21
  }
18
22
  disconnectedCallback() {
19
- const e = this._inputEl();
20
- e && this._boundNativeKeydown && e.removeEventListener("keydown", this._boundNativeKeydown, !0), super.disconnectedCallback();
23
+ const t = this._inputEl();
24
+ t && this._boundNativeKeydown && t.removeEventListener("keydown", this._boundNativeKeydown, !0), this._detachListScrollListener(), window.removeEventListener("resize", this._onWindowResize), super.disconnectedCallback();
21
25
  }
22
26
  firstUpdated() {
23
27
  this._ensureListboxA11y(), this._updateComboboxA11y();
24
- const e = this._inputEl();
25
- e && (this._boundNativeKeydown = (t) => this._handleKey(t), e.addEventListener("keydown", this._boundNativeKeydown, !0));
28
+ const t = this._inputEl();
29
+ t && (this._boundNativeKeydown = (e) => this._handleKey(e), t.addEventListener("keydown", this._boundNativeKeydown, !0));
26
30
  }
27
31
  updated() {
28
- this._ensureListboxA11y(), this._updateComboboxA11y();
32
+ this._ensureListboxA11y(), this._updateComboboxA11y(), this._attachListScrollListener();
29
33
  }
30
34
  render() {
31
- const e = (this.value ?? "").trim().length > 0, t = this._inputFocused && e && this._hasSuggestions;
32
- return d`
35
+ const t = (this.value ?? "").trim().length > 0, e = this._inputFocused && t && this._hasSuggestions;
36
+ return u`
33
37
  <div class="ripple-wrapper">
34
- <md-icon class="leading">${e ? "arrow_back" : "search"}</md-icon>
38
+ <md-icon class="leading">${t ? "arrow_back" : "search"}</md-icon>
35
39
 
36
40
  <input
37
41
  id="searchInput"
38
42
  type="search"
39
43
  name="textfield"
40
- class=${t ? "with-list" : ""}
44
+ class=${e ? "with-list" : ""}
41
45
  .value=${this.value}
42
46
  placeholder=${this.supportingText}
43
47
  autocomplete="off"
@@ -47,37 +51,41 @@ let S = 0, o = class extends x {
47
51
  aria-label=${this.supportingText || "Sök"}
48
52
  />
49
53
 
50
- ${e ? d`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
54
+ ${t ? u`<button class="clear-btn" @click=${this._clearInput} tabindex="-1" aria-label="Rensa sökfält">
51
55
  <md-icon>close</md-icon>
52
- </button>` : this.trailingIcon ? d`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : b}
56
+ </button>` : this.trailingIcon ? u`<span class="trailing"><md-icon>${this.trailingIcon}</md-icon></span>` : b}
53
57
 
54
58
  <md-ripple></md-ripple>
59
+ <md-focus-ring class="input-ring"></md-focus-ring>
55
60
  </div>
56
61
 
57
- <div class="list-divider" aria-hidden=${String(!(this.fullScreen && t))}></div>
62
+ <div class="list-divider" aria-hidden=${String(!(this.fullScreen && e))}></div>
58
63
 
59
- ${t ? d`<scb-list class="suggestion-list" id=${this._listboxId}>
60
- <slot @slotchange=${this._onSlotChange}></slot>
61
- </scb-list>` : b}
64
+ ${e ? u`
65
+ <scb-list class="suggestion-list" id=${this._listboxId}>
66
+ <slot @slotchange=${this._onSlotChange}></slot>
67
+ </scb-list>
68
+ <md-focus-ring id="optionRing" class="option-ring"></md-focus-ring>
69
+ ` : b}
62
70
  `;
63
71
  }
64
72
  submit() {
65
- const e = this._getActiveItem(), t = { value: this.value };
66
- e && (t.active = this._itemPayload(e)), this.dispatchEvent(new CustomEvent("scb-search-submit", {
67
- detail: t,
73
+ const t = this._getActiveItem(), e = { value: this.value };
74
+ t && (e.active = this._itemPayload(t)), this.dispatchEvent(new CustomEvent("scb-search-submit", {
75
+ detail: e,
68
76
  bubbles: !0,
69
77
  composed: !0
70
78
  }));
71
79
  }
72
80
  get _hasSuggestions() {
73
- return this._visibleSuggestions >= 0 ? this._visibleSuggestions > 0 : Array.from(this.getElementsByTagName("scb-list-item")).some((t) => !t.hasAttribute("hidden") && t.style.display !== "none");
81
+ return this._visibleSuggestions >= 0 ? this._visibleSuggestions > 0 : Array.from(this.getElementsByTagName("scb-list-item")).some((e) => !e.hasAttribute("hidden") && e.style.display !== "none");
74
82
  }
75
83
  _onSlotChange() {
76
84
  this._filterSuggestions(this.value);
77
85
  }
78
- _onInput(e) {
79
- const t = e.target;
80
- this.value = t.value, this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-input", {
86
+ _onInput(t) {
87
+ const e = t.target;
88
+ this.value = e.value, this._filterSuggestions(this.value), this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-input", {
81
89
  detail: { value: this.value },
82
90
  bubbles: !0,
83
91
  composed: !0
@@ -88,125 +96,147 @@ let S = 0, o = class extends x {
88
96
  }
89
97
  _onBlur() {
90
98
  setTimeout(() => {
91
- this._inputFocused = !1, this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this.requestUpdate();
99
+ this._inputFocused = !1, this._activeIndex = -1, this._kbMode = !1, this._updateComboboxA11y(), this._hideOptionRing(), this.requestUpdate();
92
100
  }, 100);
93
101
  }
94
- _handleKey(e) {
102
+ _handleKey(t) {
95
103
  if (!this._inputEl()) return;
96
- const i = this._getVisibleItems(), n = (this.value ?? "").trim().length > 0, s = this._inputFocused && n && i.length > 0, r = e.key, a = e.keyCode, c = r === "ArrowDown" || r === "Down" || a === 40, p = r === "ArrowUp" || r === "Up" || a === 38, v = r === "Home" || a === 36, g = r === "End" || a === 35, m = r === "Enter" || a === 13, f = r === "Escape" || r === "Esc" || a === 27;
97
- if (c) {
98
- if (!s) return;
99
- e.preventDefault(), this._kbMode = !0, this._moveActive(i, 1);
104
+ const s = this._getVisibleItems(), r = (this.value ?? "").trim().length > 0, i = this._inputFocused && r && s.length > 0, n = t.key, o = t.keyCode, l = n === "ArrowDown" || n === "Down" || o === 40, d = n === "ArrowUp" || n === "Up" || o === 38, g = n === "Home" || o === 36, v = n === "End" || o === 35, m = n === "Enter" || o === 13, _ = n === "Escape" || n === "Esc" || o === 27;
105
+ if (l) {
106
+ if (!i) return;
107
+ t.preventDefault(), this._kbMode = !0, this._moveActive(s, 1);
100
108
  return;
101
109
  }
102
- if (p) {
103
- if (!s) return;
104
- e.preventDefault(), this._kbMode = !0, this._moveActive(i, -1);
110
+ if (d) {
111
+ if (!i) return;
112
+ t.preventDefault(), this._kbMode = !0, this._moveActive(s, -1);
105
113
  return;
106
114
  }
107
- if (v) {
108
- if (!s) return;
109
- e.preventDefault(), this._kbMode = !0, this._activeIndex = i.length ? 0 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
115
+ if (g) {
116
+ if (!i) return;
117
+ t.preventDefault(), this._kbMode = !0, this._activeIndex = s.length ? 0 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
110
118
  return;
111
119
  }
112
- if (g) {
113
- if (!s) return;
114
- e.preventDefault(), this._kbMode = !0, this._activeIndex = i.length ? i.length - 1 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
120
+ if (v) {
121
+ if (!i) return;
122
+ t.preventDefault(), this._kbMode = !0, this._activeIndex = s.length ? s.length - 1 : -1, this._updateComboboxA11y(), this._scrollActiveIntoView();
115
123
  return;
116
124
  }
117
125
  if (m) {
118
- if (!s) {
126
+ if (!i) {
119
127
  this.submit();
120
128
  return;
121
129
  }
122
- e.preventDefault();
123
- const u = this._getActiveItem();
124
- if (u) {
125
- const _ = u.getAttribute("label") || "";
126
- this.value = _, this.dispatchEvent(new CustomEvent("scb-search-submit", {
127
- detail: { value: this.value, active: this._itemPayload(u) },
130
+ t.preventDefault();
131
+ const p = this._getActiveItem();
132
+ if (p) {
133
+ const f = p.getAttribute("label") || "";
134
+ this.value = f, this.dispatchEvent(new CustomEvent("scb-search-submit", {
135
+ detail: { value: this.value, active: this._itemPayload(p) },
128
136
  bubbles: !0,
129
137
  composed: !0
130
- })), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this.requestUpdate();
138
+ })), this._visibleSuggestions = 0, this._activeIndex = -1, this._kbMode = !1, this._hideOptionRing(), this.requestUpdate();
131
139
  } else
132
140
  this.submit();
133
141
  return;
134
142
  }
135
- if (f) {
136
- e.preventDefault(), this._clearInput();
143
+ if (_) {
144
+ t.preventDefault(), this._clearInput();
137
145
  return;
138
146
  }
139
147
  }
140
148
  _clearInput() {
141
149
  this.value = "", this._activeIndex = -1, this._kbMode = !1;
142
- const e = this._inputEl();
143
- e == null || e.focus(), e && (e.value = ""), this._filterSuggestions(""), this._updateComboboxA11y(), this.dispatchEvent(new CustomEvent("scb-search-clear", { bubbles: !0, composed: !0 }));
150
+ const t = this._inputEl();
151
+ t == null || t.focus(), t && (t.value = ""), this._filterSuggestions(""), this._updateComboboxA11y(), this._hideOptionRing(), this.dispatchEvent(new CustomEvent("scb-search-clear", { bubbles: !0, composed: !0 }));
144
152
  }
145
- _filterSuggestions(e) {
146
- const t = (e ?? "").trim().toLowerCase(), i = Array.from(this.querySelectorAll("scb-list-item"));
147
- let n = 0;
148
- for (const s of i) {
149
- const r = (s.getAttribute("label") || "").toLowerCase(), a = (s.getAttribute("supporting-text") || "").toLowerCase(), c = `${r} ${a}`.trim();
150
- t !== "" && c.includes(t) ? (s.removeAttribute("hidden"), n++) : s.setAttribute("hidden", ""), this._ensureOptionA11y(s);
153
+ _filterSuggestions(t) {
154
+ const e = (t ?? "").trim().toLowerCase(), s = Array.from(this.querySelectorAll("scb-list-item"));
155
+ let r = 0;
156
+ for (const i of s) {
157
+ const n = (i.getAttribute("label") || "").toLowerCase(), o = (i.getAttribute("supporting-text") || "").toLowerCase(), l = `${n} ${o}`.trim();
158
+ e !== "" && l.includes(e) ? (i.removeAttribute("hidden"), r++) : i.setAttribute("hidden", ""), this._ensureOptionA11y(i);
151
159
  }
152
- this._visibleSuggestions = n, this._activeIndex >= n && (this._activeIndex = -1), this._updateComboboxA11y(), this.requestUpdate();
160
+ this._visibleSuggestions = r, this._activeIndex >= r && (this._activeIndex = -1), this._updateComboboxA11y(), this.requestUpdate();
153
161
  }
154
162
  _inputEl() {
155
- var e;
156
- return ((e = this.renderRoot) == null ? void 0 : e.querySelector("#searchInput")) ?? null;
163
+ var t;
164
+ return ((t = this.renderRoot) == null ? void 0 : t.querySelector("#searchInput")) ?? null;
157
165
  }
158
166
  _listEl() {
159
- var e;
160
- return ((e = this.renderRoot) == null ? void 0 : e.querySelector("scb-list.suggestion-list")) ?? null;
167
+ var t;
168
+ return ((t = this.renderRoot) == null ? void 0 : t.querySelector("scb-list.suggestion-list")) ?? null;
169
+ }
170
+ _ringEl() {
171
+ var t;
172
+ return ((t = this.renderRoot) == null ? void 0 : t.querySelector("#optionRing")) ?? null;
161
173
  }
162
174
  _getVisibleItems() {
163
- return Array.from(this.querySelectorAll("scb-list-item")).filter((t) => !t.hasAttribute("hidden") && t.style.display !== "none");
175
+ return Array.from(this.querySelectorAll("scb-list-item")).filter((e) => !e.hasAttribute("hidden") && e.style.display !== "none");
164
176
  }
165
177
  _getActiveItem() {
166
- const e = this._getVisibleItems();
167
- return this._activeIndex < 0 || this._activeIndex >= e.length ? null : e[this._activeIndex] ?? null;
178
+ const t = this._getVisibleItems();
179
+ return this._activeIndex < 0 || this._activeIndex >= t.length ? null : t[this._activeIndex] ?? null;
168
180
  }
169
- _moveActive(e, t) {
170
- if (!e.length) {
171
- this._activeIndex = -1, this._updateComboboxA11y();
181
+ _moveActive(t, e) {
182
+ if (!t.length) {
183
+ this._activeIndex = -1, this._updateComboboxA11y(), this._hideOptionRing();
172
184
  return;
173
185
  }
174
- let i = this._activeIndex + t;
175
- this._activeIndex === -1 ? i = t > 0 ? 0 : e.length - 1 : (i < 0 && (i = 0), i >= e.length && (i = e.length - 1)), this._activeIndex = i, this._updateComboboxA11y(), this._scrollActiveIntoView();
186
+ let s = this._activeIndex + e;
187
+ this._activeIndex === -1 ? s = e > 0 ? 0 : t.length - 1 : (s < 0 && (s = 0), s >= t.length && (s = t.length - 1)), this._activeIndex = s, this._updateComboboxA11y(), this._scrollActiveIntoView();
176
188
  }
177
189
  _scrollActiveIntoView() {
178
- const e = this._getActiveItem();
179
- e && e.scrollIntoView({ block: "nearest" });
190
+ const t = this._getActiveItem();
191
+ t && t.scrollIntoView({ block: "nearest" });
180
192
  }
181
- _itemPayload(e) {
193
+ _itemPayload(t) {
182
194
  return {
183
- label: e.getAttribute("label") || "",
184
- supportingText: e.getAttribute("supporting-text") || "",
185
- href: e.getAttribute("href") || "",
186
- type: e.getAttribute("type") || "",
187
- id: e.id || ""
195
+ label: t.getAttribute("label") || "",
196
+ supportingText: t.getAttribute("supporting-text") || "",
197
+ href: t.getAttribute("href") || "",
198
+ type: t.getAttribute("type") || "",
199
+ id: t.id || ""
188
200
  };
189
201
  }
190
202
  _ensureListboxA11y() {
191
- const e = this._listEl();
192
- e && (e.id || (e.id = this._listboxId), e.setAttribute("role", "listbox"), e.setAttribute("aria-label", "Sökförslag")), Array.from(this.querySelectorAll("scb-list-item")).forEach((i) => this._ensureOptionA11y(i));
203
+ const t = this._listEl();
204
+ t && (t.id || (t.id = this._listboxId), t.setAttribute("role", "listbox"), t.setAttribute("aria-label", "Sökförslag")), Array.from(this.querySelectorAll("scb-list-item")).forEach((s) => this._ensureOptionA11y(s));
193
205
  }
194
- _ensureOptionA11y(e) {
195
- e.id || (e.id = `${this._listboxId}-opt-${Math.random().toString(36).slice(2, 8)}`), e.setAttribute("role", "option"), e.setAttribute("tabindex", "-1");
206
+ _ensureOptionA11y(t) {
207
+ t.id || (t.id = `${this._listboxId}-opt-${Math.random().toString(36).slice(2, 8)}`), t.setAttribute("role", "option"), t.setAttribute("tabindex", "-1");
196
208
  }
197
209
  _updateComboboxA11y() {
198
- const e = this._inputEl();
199
- if (!e) return;
200
- const t = this._getVisibleItems(), i = (this.value ?? "").trim().length > 0, n = this._inputFocused && i && t.length > 0;
201
- e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-controls", this._listboxId), e.setAttribute("aria-expanded", String(n));
202
- const s = n ? this._getActiveItem() : null;
203
- s != null && s.id ? e.setAttribute("aria-activedescendant", s.id) : e.removeAttribute("aria-activedescendant"), t.forEach((r, a) => {
204
- const c = a === this._activeIndex;
205
- r.setAttribute("aria-selected", String(c)), r.style.boxShadow = "", r.style.borderRadius = "", this._kbMode && c && (r.style.boxShadow = "inset 0 0 0 var(--md-focus-ring-width, 2px) var(--md-focus-ring-color, var(--p-40))", r.style.borderRadius = "var(--md-sys-shape-corner-small, 8px)");
206
- });
210
+ const t = this._inputEl();
211
+ if (!t) return;
212
+ const e = this._getVisibleItems(), s = (this.value ?? "").trim().length > 0, r = this._inputFocused && s && e.length > 0;
213
+ t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-controls", this._listboxId), t.setAttribute("aria-expanded", String(r));
214
+ const i = r ? this._getActiveItem() : null;
215
+ i != null && i.id ? t.setAttribute("aria-activedescendant", i.id) : t.removeAttribute("aria-activedescendant"), this._kbMode && i && r ? this._positionOptionRing(i) : this._hideOptionRing();
216
+ }
217
+ _positionOptionRing(t) {
218
+ const e = this._ringEl(), s = this._listEl();
219
+ if (!e || !s) return;
220
+ const r = this.getBoundingClientRect(), i = t.getBoundingClientRect(), n = i.top - r.top, o = i.left - r.left, l = i.width, d = i.height;
221
+ e.style.top = `${n}px`, e.style.left = `${o}px`, e.style.width = `${l}px`, e.style.height = `${d}px`, e.setAttribute("data-show", "true");
222
+ }
223
+ _hideOptionRing() {
224
+ const t = this._ringEl();
225
+ t && t.removeAttribute("data-show");
226
+ }
227
+ _onWindowResize() {
228
+ const t = this._getActiveItem();
229
+ this._kbMode && t && this._positionOptionRing(t);
230
+ }
231
+ _attachListScrollListener() {
232
+ const t = this._listEl();
233
+ !t || this._listWithHandler === t || (this._detachListScrollListener(), t.addEventListener("scroll", this._listScrollHandler, { passive: !0 }), this._listWithHandler = t);
234
+ }
235
+ _detachListScrollListener() {
236
+ this._listWithHandler && (this._listWithHandler.removeEventListener("scroll", this._listScrollHandler), this._listWithHandler = void 0);
207
237
  }
208
238
  };
209
- o.styles = y`
239
+ a.styles = y`
210
240
  :host {
211
241
  display: flex;
212
242
  flex-direction: column;
@@ -255,6 +285,31 @@ o.styles = y`
255
285
  width: 100%;
256
286
  }
257
287
 
288
+ md-focus-ring.input-ring {
289
+ position: absolute;
290
+ inset: 0;
291
+ pointer-events: none;
292
+ display: none;
293
+ border-radius: var(--scb-search-radius);
294
+ z-index: 4;
295
+ }
296
+ .ripple-wrapper:focus-within md-focus-ring.input-ring { display: block; }
297
+ input.with-list ~ md-focus-ring.input-ring {
298
+ border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0;
299
+ }
300
+ :host([full-screen]) md-focus-ring.input-ring {
301
+ border-radius: var(--radius-none, 0px) !important;
302
+ }
303
+
304
+ md-focus-ring.option-ring {
305
+ position: absolute;
306
+ display: none;
307
+ pointer-events: none;
308
+ z-index: 11;
309
+ border-radius: var(--md-sys-shape-corner-small, 8px);
310
+ }
311
+ md-focus-ring.option-ring[data-show="true"] { display: block; }
312
+
258
313
  .leading {
259
314
  position: absolute;
260
315
  left: var(--scb-search-padding-x);
@@ -269,13 +324,9 @@ o.styles = y`
269
324
  color: var(--md-sys-color-on-surface-variant);
270
325
  z-index: 2;
271
326
  }
272
- .leading md-icon {
273
- font-size: var(--scb-search-icon-size);
274
- line-height: 1;
275
- }
327
+ .leading md-icon { font-size: var(--scb-search-icon-size); line-height: 1; }
276
328
 
277
- .trailing,
278
- .clear-btn {
329
+ .trailing, .clear-btn {
279
330
  position: absolute;
280
331
  right: var(--scb-search-padding-x);
281
332
  top: 50%;
@@ -290,12 +341,7 @@ o.styles = y`
290
341
  }
291
342
  .trailing md-icon { pointer-events: none; font-size: var(--scb-search-icon-size); }
292
343
 
293
- .clear-btn {
294
- background: none;
295
- border: 0;
296
- padding: 0;
297
- cursor: pointer;
298
- }
344
+ .clear-btn { background: none; border: 0; padding: 0; cursor: pointer; }
299
345
  .clear-btn[hidden] { display: none; }
300
346
 
301
347
  input[type="search"] {
@@ -339,11 +385,7 @@ o.styles = y`
339
385
  --md-ripple-hover-opacity: 0;
340
386
  }
341
387
 
342
- input[type="search"]::-webkit-search-cancel-button {
343
- -webkit-appearance: none;
344
- appearance: none;
345
- display: none;
346
- }
388
+ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
347
389
 
348
390
  input.with-list { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
349
391
  input.with-list ~ md-ripple { border-radius: var(--scb-search-open-radius) var(--scb-search-open-radius) 0 0; }
@@ -358,21 +400,16 @@ o.styles = y`
358
400
  border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
359
401
  border-top: 0;
360
402
  border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);
361
- overflow: hidden;
403
+ overflow: auto;
362
404
  box-sizing: border-box;
405
+ max-height: var(--scb-search-suggestions-max-h, 60vh);
363
406
  }
364
407
 
365
408
  :host([full-screen]) input[type="search"],
366
409
  :host([full-screen]) input.with-list,
367
- :host([full-screen]) input.with-list ~ md-ripple,
368
- :host([full-screen]) md-ripple {
369
- border-radius: var(--radius-none, 0px) !important;
370
- }
410
+ :host([full-screen]) input.with-list ~ md-ripple { border-radius: var(--radius-none, 0px) !important; }
371
411
  :host([full-screen]) scb-list.suggestion-list {
372
- position: static;
373
- border: 0;
374
- border-radius: 0;
375
- background: transparent;
412
+ position: static; border: 0; border-radius: 0; background: transparent;
376
413
  }
377
414
 
378
415
  .list-divider {
@@ -387,24 +424,24 @@ o.styles = y`
387
424
  :host { color: var(--md-sys-color-on-surface); }
388
425
  }
389
426
  `;
390
- l([
427
+ c([
391
428
  h({ type: String, attribute: "trailing-icon" })
392
- ], o.prototype, "trailingIcon", 2);
393
- l([
429
+ ], a.prototype, "trailingIcon", 2);
430
+ c([
394
431
  h({ type: String, attribute: "supporting-text" })
395
- ], o.prototype, "supportingText", 2);
396
- l([
432
+ ], a.prototype, "supportingText", 2);
433
+ c([
397
434
  h({ type: String })
398
- ], o.prototype, "value", 2);
399
- l([
435
+ ], a.prototype, "value", 2);
436
+ c([
400
437
  h({ type: String, reflect: !0 })
401
- ], o.prototype, "size", 2);
402
- l([
438
+ ], a.prototype, "size", 2);
439
+ c([
403
440
  h({ type: Boolean, attribute: "full-screen", reflect: !0 })
404
- ], o.prototype, "fullScreen", 2);
405
- o = l([
406
- A("scb-search")
407
- ], o);
441
+ ], a.prototype, "fullScreen", 2);
442
+ a = c([
443
+ w("scb-search")
444
+ ], a);
408
445
  export {
409
- o as ScbSearch
446
+ a as ScbSearch
410
447
  };