@sbb-esta/lyne-elements 1.3.0 → 1.4.0

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 (221) hide show
  1. package/autocomplete/autocomplete-base-element.d.ts +93 -0
  2. package/autocomplete/autocomplete-base-element.d.ts.map +1 -0
  3. package/autocomplete/autocomplete.d.ts +13 -86
  4. package/autocomplete/autocomplete.d.ts.map +1 -1
  5. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +45 -0
  6. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
  7. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts +33 -0
  8. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts.map +1 -0
  9. package/autocomplete-grid/autocomplete-grid-button.d.ts +2 -0
  10. package/autocomplete-grid/autocomplete-grid-button.d.ts.map +1 -0
  11. package/autocomplete-grid/autocomplete-grid-button.js +66 -0
  12. package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.d.ts +17 -0
  13. package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.d.ts.map +1 -0
  14. package/autocomplete-grid/autocomplete-grid-cell.d.ts +2 -0
  15. package/autocomplete-grid/autocomplete-grid-cell.d.ts.map +1 -0
  16. package/autocomplete-grid/autocomplete-grid-cell.js +28 -0
  17. package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.d.ts +21 -0
  18. package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.d.ts.map +1 -0
  19. package/autocomplete-grid/autocomplete-grid-optgroup/index.d.ts +2 -0
  20. package/autocomplete-grid/autocomplete-grid-optgroup/index.d.ts.map +1 -0
  21. package/autocomplete-grid/autocomplete-grid-optgroup.d.ts +2 -0
  22. package/autocomplete-grid/autocomplete-grid-optgroup.d.ts.map +1 -0
  23. package/autocomplete-grid/autocomplete-grid-optgroup.js +37 -0
  24. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts +40 -0
  25. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts.map +1 -0
  26. package/autocomplete-grid/autocomplete-grid-option.d.ts +2 -0
  27. package/autocomplete-grid/autocomplete-grid-option.d.ts.map +1 -0
  28. package/autocomplete-grid/autocomplete-grid-option.js +67 -0
  29. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts +18 -0
  30. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts.map +1 -0
  31. package/autocomplete-grid/autocomplete-grid-row.d.ts +2 -0
  32. package/autocomplete-grid/autocomplete-grid-row.d.ts.map +1 -0
  33. package/autocomplete-grid/autocomplete-grid-row.js +31 -0
  34. package/autocomplete-grid/autocomplete-grid.d.ts +2 -0
  35. package/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
  36. package/autocomplete-grid/autocomplete-grid.js +139 -0
  37. package/autocomplete-grid.d.ts +7 -0
  38. package/autocomplete-grid.d.ts.map +1 -0
  39. package/autocomplete-grid.js +6 -0
  40. package/autocomplete.d.ts +1 -0
  41. package/autocomplete.d.ts.map +1 -1
  42. package/autocomplete.js +162 -145
  43. package/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
  44. package/button/mini-button/mini-button-base-element.d.ts +9 -0
  45. package/button/mini-button/mini-button-base-element.d.ts.map +1 -0
  46. package/button/mini-button/mini-button.d.ts +3 -4
  47. package/button/mini-button/mini-button.d.ts.map +1 -1
  48. package/button/mini-button.d.ts +1 -0
  49. package/button/mini-button.d.ts.map +1 -1
  50. package/button/mini-button.js +23 -13
  51. package/checkbox/checkbox.js +18 -18
  52. package/checkbox/common.js +13 -13
  53. package/container/container.js +3 -3
  54. package/core/mixins/form-associated-mixin.d.ts.map +1 -1
  55. package/core/mixins.js +3 -1
  56. package/core/overlay/overlay-trigger-attributes.d.ts +1 -1
  57. package/core/overlay/overlay-trigger-attributes.d.ts.map +1 -1
  58. package/core/overlay.js +2 -2
  59. package/core/styles/core.scss +1 -0
  60. package/core/styles/mixins/buttons.scss +13 -8
  61. package/core/styles/mixins/helpers.scss +1 -0
  62. package/core/styles/mixins/pearl-chain-bullet.scss +1 -1
  63. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +1 -0
  64. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +2 -1
  65. package/core.css +3 -1
  66. package/custom-elements.json +13897 -9149
  67. package/datepicker/datepicker-next-day.js +12 -12
  68. package/datepicker/datepicker-previous-day.js +1 -1
  69. package/development/autocomplete/autocomplete-base-element.d.ts +93 -0
  70. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -0
  71. package/development/autocomplete/autocomplete.d.ts +13 -86
  72. package/development/autocomplete/autocomplete.d.ts.map +1 -1
  73. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts +45 -0
  74. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
  75. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts +33 -0
  76. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts.map +1 -0
  77. package/development/autocomplete-grid/autocomplete-grid-button.d.ts +2 -0
  78. package/development/autocomplete-grid/autocomplete-grid-button.d.ts.map +1 -0
  79. package/development/autocomplete-grid/autocomplete-grid-button.js +224 -0
  80. package/development/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.d.ts +17 -0
  81. package/development/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.d.ts.map +1 -0
  82. package/development/autocomplete-grid/autocomplete-grid-cell.d.ts +2 -0
  83. package/development/autocomplete-grid/autocomplete-grid-cell.d.ts.map +1 -0
  84. package/development/autocomplete-grid/autocomplete-grid-cell.js +67 -0
  85. package/development/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.d.ts +21 -0
  86. package/development/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.d.ts.map +1 -0
  87. package/development/autocomplete-grid/autocomplete-grid-optgroup/index.d.ts +2 -0
  88. package/development/autocomplete-grid/autocomplete-grid-optgroup/index.d.ts.map +1 -0
  89. package/development/autocomplete-grid/autocomplete-grid-optgroup.d.ts +2 -0
  90. package/development/autocomplete-grid/autocomplete-grid-optgroup.d.ts.map +1 -0
  91. package/development/autocomplete-grid/autocomplete-grid-optgroup.js +45 -0
  92. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts +40 -0
  93. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.d.ts.map +1 -0
  94. package/development/autocomplete-grid/autocomplete-grid-option.d.ts +2 -0
  95. package/development/autocomplete-grid/autocomplete-grid-option.d.ts.map +1 -0
  96. package/development/autocomplete-grid/autocomplete-grid-option.js +174 -0
  97. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts +18 -0
  98. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.d.ts.map +1 -0
  99. package/development/autocomplete-grid/autocomplete-grid-row.d.ts +2 -0
  100. package/development/autocomplete-grid/autocomplete-grid-row.d.ts.map +1 -0
  101. package/development/autocomplete-grid/autocomplete-grid-row.js +143 -0
  102. package/development/autocomplete-grid/autocomplete-grid.d.ts +2 -0
  103. package/development/autocomplete-grid/autocomplete-grid.d.ts.map +1 -0
  104. package/development/autocomplete-grid/autocomplete-grid.js +185 -0
  105. package/development/autocomplete-grid.d.ts +7 -0
  106. package/development/autocomplete-grid.d.ts.map +1 -0
  107. package/development/autocomplete-grid.js +7 -0
  108. package/development/autocomplete.d.ts +1 -0
  109. package/development/autocomplete.d.ts.map +1 -1
  110. package/development/autocomplete.js +168 -143
  111. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.d.ts.map +1 -1
  112. package/development/breadcrumb/breadcrumb-group.js +1 -1
  113. package/development/button/mini-button/mini-button-base-element.d.ts +9 -0
  114. package/development/button/mini-button/mini-button-base-element.d.ts.map +1 -0
  115. package/development/button/mini-button/mini-button.d.ts +3 -4
  116. package/development/button/mini-button/mini-button.d.ts.map +1 -1
  117. package/development/button/mini-button.d.ts +1 -0
  118. package/development/button/mini-button.d.ts.map +1 -1
  119. package/development/button/mini-button.js +32 -16
  120. package/development/checkbox/checkbox.js +7 -1
  121. package/development/checkbox/common.js +1 -3
  122. package/development/container/container.js +2 -1
  123. package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
  124. package/development/core/mixins.js +4 -2
  125. package/development/core/overlay/overlay-trigger-attributes.d.ts +1 -1
  126. package/development/core/overlay/overlay-trigger-attributes.d.ts.map +1 -1
  127. package/development/core/overlay.js +3 -3
  128. package/development/datepicker/datepicker-next-day.js +8 -7
  129. package/development/datepicker/datepicker-previous-day.js +8 -7
  130. package/development/form-field/form-field-clear/form-field-clear.d.ts.map +1 -1
  131. package/development/form-field/form-field-clear.js +8 -7
  132. package/development/form-field/form-field.js +3 -3
  133. package/development/icon/icon-base.d.ts.map +1 -1
  134. package/development/icon/icon.d.ts.map +1 -1
  135. package/development/icon.js +1 -1
  136. package/development/image/image.d.ts +1 -0
  137. package/development/image/image.d.ts.map +1 -1
  138. package/development/image.js +10 -4
  139. package/development/map-container.js +12 -14
  140. package/development/navigation/navigation-marker/navigation-marker.d.ts.map +1 -1
  141. package/development/navigation/navigation-marker.js +1 -1
  142. package/development/option/optgroup/optgroup-base-element.d.ts +28 -0
  143. package/development/option/optgroup/optgroup-base-element.d.ts.map +1 -0
  144. package/development/option/optgroup/optgroup.d.ts +7 -20
  145. package/development/option/optgroup/optgroup.d.ts.map +1 -1
  146. package/development/option/optgroup.d.ts +1 -0
  147. package/development/option/optgroup.d.ts.map +1 -1
  148. package/development/option/optgroup.js +74 -49
  149. package/development/option/option/option-base-element.d.ts +69 -0
  150. package/development/option/option/option-base-element.d.ts.map +1 -0
  151. package/development/option/option/option.d.ts +14 -57
  152. package/development/option/option/option.d.ts.map +1 -1
  153. package/development/option/option.d.ts +1 -0
  154. package/development/option/option.d.ts.map +1 -1
  155. package/development/option/option.js +267 -220
  156. package/development/radio-button/common/radio-button-common.d.ts +1 -1
  157. package/development/radio-button/common/radio-button-common.d.ts.map +1 -1
  158. package/development/radio-button/common.js +13 -12
  159. package/development/radio-button/radio-button/radio-button.d.ts +7 -0
  160. package/development/radio-button/radio-button/radio-button.d.ts.map +1 -1
  161. package/development/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  162. package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  163. package/development/radio-button/radio-button-group.js +1 -1
  164. package/development/radio-button/radio-button-panel/radio-button-panel.d.ts +7 -0
  165. package/development/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
  166. package/development/radio-button/radio-button-panel.js +16 -2
  167. package/development/radio-button/radio-button.js +16 -2
  168. package/development/skiplink-list/skiplink-list.d.ts +1 -0
  169. package/development/skiplink-list/skiplink-list.d.ts.map +1 -1
  170. package/development/skiplink-list.js +1 -1
  171. package/development/tabs/tab-group.js +2 -9
  172. package/development/tabs/tab.js +10 -2
  173. package/development/tag/tag-group.js +1 -1
  174. package/development/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map +1 -1
  175. package/development/timetable-occupancy-icon.js +3 -6
  176. package/development/toggle/toggle.js +1 -1
  177. package/form-field/form-field-clear/form-field-clear.d.ts.map +1 -1
  178. package/form-field/form-field-clear.js +11 -11
  179. package/form-field/form-field.js +2 -2
  180. package/icon/icon-base.d.ts.map +1 -1
  181. package/icon/icon.d.ts.map +1 -1
  182. package/image/image.d.ts +1 -0
  183. package/image/image.d.ts.map +1 -1
  184. package/image.js +24 -24
  185. package/index.d.ts +12 -0
  186. package/index.js +12 -0
  187. package/map-container.js +8 -8
  188. package/navigation/navigation-marker/navigation-marker.d.ts.map +1 -1
  189. package/option/optgroup/optgroup-base-element.d.ts +28 -0
  190. package/option/optgroup/optgroup-base-element.d.ts.map +1 -0
  191. package/option/optgroup/optgroup.d.ts +7 -20
  192. package/option/optgroup/optgroup.d.ts.map +1 -1
  193. package/option/optgroup.d.ts +1 -0
  194. package/option/optgroup.d.ts.map +1 -1
  195. package/option/optgroup.js +80 -60
  196. package/option/option/option-base-element.d.ts +69 -0
  197. package/option/option/option-base-element.d.ts.map +1 -0
  198. package/option/option/option.d.ts +14 -57
  199. package/option/option/option.d.ts.map +1 -1
  200. package/option/option.d.ts +1 -0
  201. package/option/option.d.ts.map +1 -1
  202. package/option/option.js +186 -145
  203. package/package.json +36 -1
  204. package/radio-button/common/radio-button-common.d.ts +1 -1
  205. package/radio-button/common/radio-button-common.d.ts.map +1 -1
  206. package/radio-button/common.js +6 -15
  207. package/radio-button/radio-button/radio-button.d.ts +7 -0
  208. package/radio-button/radio-button/radio-button.d.ts.map +1 -1
  209. package/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  210. package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  211. package/radio-button/radio-button-panel/radio-button-panel.d.ts +7 -0
  212. package/radio-button/radio-button-panel/radio-button-panel.d.ts.map +1 -1
  213. package/radio-button/radio-button-panel.js +35 -22
  214. package/radio-button/radio-button.js +32 -19
  215. package/skiplink-list/skiplink-list.d.ts +1 -0
  216. package/skiplink-list/skiplink-list.d.ts.map +1 -1
  217. package/standard-theme.css +3 -1
  218. package/tabs/tab-group.js +19 -19
  219. package/tabs/tab.js +10 -10
  220. package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map +1 -1
  221. package/timetable-occupancy-icon.js +22 -24
@@ -1,17 +1,17 @@
1
- import { customElement as i } from "lit/decorators.js";
1
+ import { customElement as n } from "lit/decorators.js";
2
2
  import { hostAttributes as d } from "../core/decorators.js";
3
3
  import { i18nNextDay as l, i18nSelectNextDay as c } from "../core/i18n.js";
4
4
  import { SbbDatepickerButton as u } from "./common.js";
5
5
  import { findNextAvailableDate as v } from "./datepicker.js";
6
6
  import "../icon.js";
7
7
  import { css as h } from "lit";
8
- const f = h`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-next-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-next-day:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled])) .sbb-datepicker-next-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-datepicker-next-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled]):is(:active,[data-active])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-next-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
9
- var p = Object.defineProperty, m = Object.getOwnPropertyDescriptor, g = (o, b, a, r) => {
10
- for (var t = r > 1 ? void 0 : r ? m(b, a) : b, e = o.length - 1, n; e >= 0; e--)
11
- (n = o[e]) && (t = (r ? n(b, a, t) : n(t)) || t);
12
- return r && t && p(b, a, t), t;
8
+ const p = h`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-next-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-next-day:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-datepicker-next-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-datepicker-next-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-next-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
9
+ var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, g = (o, b, a, r) => {
10
+ for (var t = r > 1 ? void 0 : r ? m(b, a) : b, e = o.length - 1, s; e >= 0; e--)
11
+ (s = o[e]) && (t = (r ? s(b, a, t) : s(t)) || t);
12
+ return r && t && f(b, a, t), t;
13
13
  };
14
- let s = class extends u {
14
+ let i = class extends u {
15
15
  constructor() {
16
16
  super(...arguments), this.iconName = "chevron-small-right-small", this.i18nOffBoundaryDay = l, this.i18nSelectOffBoundaryDay = c, this.findAvailableDate = v;
17
17
  }
@@ -19,13 +19,13 @@ let s = class extends u {
19
19
  this.boundary !== o.detail.max && (this.boundary = o.detail.max, this.setDisabledState(this.datePickerElement));
20
20
  }
21
21
  };
22
- s.styles = f;
23
- s = g([
24
- i("sbb-datepicker-next-day"),
22
+ i.styles = p;
23
+ i = g([
24
+ n("sbb-datepicker-next-day"),
25
25
  d({
26
26
  slot: "suffix"
27
27
  })
28
- ], s);
28
+ ], i);
29
29
  export {
30
- s as SbbDatepickerNextDayElement
30
+ i as SbbDatepickerNextDayElement
31
31
  };
@@ -5,7 +5,7 @@ import { SbbDatepickerButton as u } from "./common.js";
5
5
  import { findPreviousAvailableDate as v } from "./datepicker.js";
6
6
  import "../icon.js";
7
7
  import { css as p } from "lit";
8
- const h = p`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-previous-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-previous-day:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled])) .sbb-datepicker-previous-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled])) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-datepicker-previous-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled]):is(:active,[data-active])) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-previous-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
8
+ const h = p`*,:before,:after{box-sizing:border-box}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-datepicker-previous-day{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-datepicker-previous-day:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-datepicker-previous-day{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-datepicker-previous-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-datepicker-previous-day:before{background-color:var(--sbb-button-color-active-background)}.sbb-datepicker-previous-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
9
9
  var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, g = (t, r, a, b) => {
10
10
  for (var o = b > 1 ? void 0 : b ? m(r, a) : r, e = t.length - 1, i; e >= 0; e--)
11
11
  (i = t[e]) && (o = (b ? i(r, a, o) : i(o)) || o);
@@ -0,0 +1,93 @@
1
+ import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
2
+ import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
3
+ import { SbbConnectedAbortController } from '../core/controllers.js';
4
+ import { SbbOptionBaseElement } from '../option.js';
5
+
6
+ declare const SbbAutocompleteBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
7
+ export declare abstract class SbbAutocompleteBaseElement extends SbbAutocompleteBaseElement_base {
8
+ static styles: CSSResultGroup;
9
+ /**
10
+ * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
11
+ * If not set, it will search for the first 'sbb-form-field' ancestor.
12
+ */
13
+ origin?: string | HTMLElement;
14
+ /**
15
+ * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
16
+ * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
17
+ * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
18
+ */
19
+ trigger?: string | HTMLInputElement;
20
+ /** Whether the icon space is preserved when no icon is set. */
21
+ preserveIconSpace?: boolean;
22
+ /** Returns the element where autocomplete overlay is attached to. */
23
+ get originElement(): HTMLElement;
24
+ private _originElement?;
25
+ /** Returns the trigger element. */
26
+ get triggerElement(): HTMLInputElement | undefined;
27
+ private _triggerElement;
28
+ protected abstract overlayId: string;
29
+ protected abstract panelRole: string;
30
+ protected abort: SbbConnectedAbortController;
31
+ private _overlay;
32
+ private _optionContainer;
33
+ private _triggerEventsController;
34
+ private _openPanelEventsController;
35
+ private _didLoad;
36
+ private _isPointerDownEventOnMenu;
37
+ protected abstract get options(): SbbOptionBaseElement[];
38
+ protected abstract syncNegative(): void;
39
+ protected abstract setTriggerAttributes(element: HTMLInputElement): void;
40
+ protected abstract openedPanelKeyboardInteraction(event: KeyboardEvent): void;
41
+ protected abstract selectByKeyboard(event: KeyboardEvent): void;
42
+ protected abstract setNextActiveOption(event: KeyboardEvent): void;
43
+ protected abstract resetActiveElement(): void;
44
+ protected abstract onOptionClick(event: MouseEvent): void;
45
+ /** Opens the autocomplete. */
46
+ open(): void;
47
+ /** Closes the autocomplete. */
48
+ close(): void;
49
+ connectedCallback(): void;
50
+ protected willUpdate(changedProperties: PropertyValues<this>): void;
51
+ protected firstUpdated(changedProperties: PropertyValues<this>): void;
52
+ disconnectedCallback(): void;
53
+ /** When an option is selected, update the input value and close the autocomplete. */
54
+ protected onOptionSelected(event: CustomEvent): void;
55
+ private _handleSlotchange;
56
+ /** The autocomplete should inherit 'readonly' state from the trigger. */
57
+ private get _readonly();
58
+ /** Removes trigger click listener on trigger change. */
59
+ private _resetOriginClickListener;
60
+ /** Removes trigger click listener on trigger change. */
61
+ private _resetTriggerClickListener;
62
+ private _componentSetup;
63
+ /**
64
+ * Retrieve the element where the autocomplete will be attached.
65
+ * @returns 'origin' or the first 'sbb-form-field' ancestor.
66
+ */
67
+ private _findOriginElement;
68
+ /**
69
+ * Retrieve the element that will trigger the autocomplete opening.
70
+ * @returns 'trigger' or the first 'input' inside the origin element.
71
+ */
72
+ private _getTriggerElement;
73
+ private _bindTo;
74
+ private _setupTriggerEvents;
75
+ private _setOverlayPosition;
76
+ /** On open/close animation end.
77
+ * In rare cases it can be that the animationEnd event is triggered twice.
78
+ * To avoid entering a corrupt state, exit when state is not expected.
79
+ */
80
+ private _onAnimationEnd;
81
+ private _onOpenAnimationEnd;
82
+ private _onCloseAnimationEnd;
83
+ private _attachOpenPanelEvents;
84
+ private _pointerDownListener;
85
+ private _closeOnBackdropClick;
86
+ private _closedPanelKeyboardInteraction;
87
+ /** Highlight the searched text on the options. */
88
+ private _highlightOptions;
89
+ private _removeTriggerAttributes;
90
+ protected render(): TemplateResult;
91
+ }
92
+ export {};
93
+ //# sourceMappingURL=autocomplete-base-element.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAInB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AASrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;;AAUzD,8BAAsB,0BAA2B,SAAQ,+BAExD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAEjD;;;;OAIG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEvD,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEnC,qEAAqE;IACrE,IAAW,aAAa,IAAI,WAAW,CAKtC;IACD,OAAO,CAAC,cAAc,CAAC,CAAc;IAErC,mCAAmC;IACnC,IAAW,cAAc,IAAI,gBAAgB,GAAG,SAAS,CAExD;IACD,OAAO,CAAC,eAAe,CAA+B;IAEtD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IACrC,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IACrC,SAAS,CAAC,KAAK,8BAAyC;IACxD,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,wBAAwB,CAAmB;IACnD,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IAEnD,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;IACzD,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI;IACvC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IACxE,SAAS,CAAC,QAAQ,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAC7E,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAC/D,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAClE,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,IAAI;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAEzD,8BAA8B;IACvB,IAAI,IAAI,IAAI;IAYnB,+BAA+B;IACxB,KAAK,IAAI,IAAI;IAYJ,iBAAiB,IAAI,IAAI;cAoBtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAM5C,qFAAqF;IACrF,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAuBpD,OAAO,CAAC,iBAAiB;IAIzB,yEAAyE;IACzE,OAAO,KAAK,SAAS,GAEpB;IAED,wDAAwD;IACxD,OAAO,CAAC,yBAAyB;IASjC,wDAAwD;IACxD,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,eAAe;IAgBvB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,mBAAmB;IAU3B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,sBAAsB;IAgC9B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,+BAA+B;IAcvC,kDAAkD;IAClD,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,wBAAwB;cAIb,MAAM,IAAI,cAAc;CAyB5C"}
@@ -1,7 +1,6 @@
1
- import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
2
- import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
1
+ import { SbbOptionElement } from '../option.js';
2
+ import { SbbAutocompleteBaseElement } from './autocomplete-base-element.js';
3
3
 
4
- declare const SbbAutocompleteElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
5
4
  /**
6
5
  * Combined with a native input, it displays a panel with a list of available options.
7
6
  *
@@ -14,95 +13,23 @@ declare const SbbAutocompleteElement_base: import('../core/mixins.js').AbstractC
14
13
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
15
14
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
16
15
  */
17
- export declare class SbbAutocompleteElement extends SbbAutocompleteElement_base {
18
- static styles: CSSResultGroup;
19
- /**
20
- * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
21
- * If not set, will search for the first 'sbb-form-field' ancestor.
22
- */
23
- origin?: string | HTMLElement;
24
- /**
25
- * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
26
- * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
27
- * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
28
- */
29
- trigger?: string | HTMLInputElement;
30
- /** Whether the icon space is preserved when no icon is set. */
31
- preserveIconSpace?: boolean;
32
- private _overlay;
33
- private _optionContainer;
34
- /** Returns the element where autocomplete overlay is attached to. */
35
- get originElement(): HTMLElement;
36
- private _originElement?;
37
- /** Returns the trigger element. */
38
- get triggerElement(): HTMLInputElement | undefined;
39
- private _triggerElement;
40
- private _triggerEventsController;
41
- private _openPanelEventsController;
42
- private _overlayId;
16
+ export declare class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
17
+ protected overlayId: string;
18
+ protected panelRole: string;
43
19
  private _activeItemIndex;
44
- private _didLoad;
45
- private _isPointerDownEventOnMenu;
46
- private _abort;
47
- /** The autocomplete should inherit 'readonly' state from the trigger. */
48
- private get _readonly();
49
- private get _options();
50
- /** Opens the autocomplete. */
51
- open(): void;
52
- /** Closes the autocomplete. */
53
- close(): void;
54
- /** Removes trigger click listener on trigger change. */
55
- private _resetOriginClickListener;
56
- /** Removes trigger click listener on trigger change. */
57
- private _resetTriggerClickListener;
58
- /** When an option is selected, update the input value and close the autocomplete. */
59
- private _onOptionSelected;
60
- private _onOptionClick;
20
+ protected get options(): SbbOptionElement[];
21
+ protected onOptionClick(event: MouseEvent): void;
61
22
  connectedCallback(): void;
62
- protected willUpdate(changedProperties: PropertyValues<this>): void;
63
- protected firstUpdated(changedProperties: PropertyValues<this>): void;
64
- private _syncNegative;
65
- disconnectedCallback(): void;
66
- private _componentSetup;
67
- /**
68
- * Retrieve the element where the autocomplete will be attached.
69
- * @returns 'origin' or the first 'sbb-form-field' ancestor.
70
- */
71
- private _findOriginElement;
72
- /**
73
- * Retrieve the element that will trigger the autocomplete opening.
74
- * @returns 'trigger' or the first 'input' inside the origin element.
75
- */
76
- private _getTriggerElement;
77
- private _bindTo;
78
- private _setupTriggerEvents;
79
- private _setOverlayPosition;
80
- /** On open/close animation end.
81
- * In rare cases it can be that the animationEnd event is triggered twice.
82
- * To avoid entering a corrupt state, exit when state is not expected.
83
- */
84
- private _onAnimationEnd;
85
- private _onOpenAnimationEnd;
86
- private _onCloseAnimationEnd;
87
- private _attachOpenPanelEvents;
88
- private _pointerDownListener;
89
- private _closeOnBackdropClick;
90
- private _closedPanelKeyboardInteraction;
91
- private _openedPanelKeyboardInteraction;
92
- private _selectByKeyboard;
93
- private _setNextActiveOption;
94
- private _resetActiveElement;
95
- /** Highlight the searched text on the options. */
96
- private _highlightOptions;
97
- private _setTriggerAttributes;
98
- private _removeTriggerAttributes;
99
- private _handleSlotchange;
100
- protected render(): TemplateResult;
23
+ protected syncNegative(): void;
24
+ protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
25
+ protected selectByKeyboard(): void;
26
+ protected setNextActiveOption(event: KeyboardEvent): void;
27
+ protected resetActiveElement(): void;
28
+ protected setTriggerAttributes(element: HTMLInputElement): void;
101
29
  }
102
30
  declare global {
103
31
  interface HTMLElementTagNameMap {
104
32
  'sbb-autocomplete': SbbAutocompleteElement;
105
33
  }
106
34
  }
107
- export {};
108
35
  //# sourceMappingURL=autocomplete.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;AAwBnE;;;;;;;;;;;GAWG;AACH,qBAKa,sBAAuB,SAAQ,2BAE3C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAEjD;;;;OAIG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEvD,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEnC,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IAEvC,qEAAqE;IACrE,IAAW,aAAa,IAAI,WAAW,CAKtC;IACD,OAAO,CAAC,cAAc,CAAC,CAAc;IAErC,mCAAmC;IACnC,IAAW,cAAc,IAAI,gBAAgB,GAAG,SAAS,CAExD;IACD,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,wBAAwB,CAAmB;IACnD,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAAyC;IAEvD,yEAAyE;IACzE,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,8BAA8B;IACvB,IAAI,IAAI,IAAI;IAYnB,+BAA+B;IACxB,KAAK,IAAI,IAAI;IAYpB,wDAAwD;IACxD,OAAO,CAAC,yBAAyB;IASjC,wDAAwD;IACxD,OAAO,CAAC,0BAA0B;IASlC,qFAAqF;IACrF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,cAAc;IAUN,iBAAiB,IAAI,IAAI;cA0BtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,aAAa;IAQL,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,eAAe;IAgBvB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,mBAAmB;IAU3B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,sBAAsB;IAgC9B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,+BAA+B;IAcvC,OAAO,CAAC,+BAA+B;IAsBvC,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,mBAAmB;IAU3B,kDAAkD;IAClD,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
1
+ {"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;;;;;GAWG;AACH,qBAKa,sBAAuB,SAAQ,0BAA0B;IACpE,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAChC,OAAO,CAAC,gBAAgB,CAAM;IAE9B,SAAS,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAE1C;IAED,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUhC,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAsBpE,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAQlC,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBzD,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAUpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
@@ -0,0 +1,45 @@
1
+ import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
2
+ import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
3
+
4
+ /**
5
+ * Combined with a native input, it displays a panel with a list of available options with connected buttons.
6
+ *
7
+ * @slot - Use the unnamed slot to add `sbb-autocomplete-grid-row` or `sbb-autocomplete-grid-optgroup` elements to the `sbb-autocomplete-grid`.
8
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-autocomplete-grid` starts the opening transition. Can be canceled.
9
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-autocomplete-grid` is opened.
10
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-autocomplete-grid` begins the closing transition. Can be canceled.
11
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-autocomplete-grid` is closed.
12
+ * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
13
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
14
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
15
+ */
16
+ export declare class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
17
+ protected overlayId: string;
18
+ protected panelRole: string;
19
+ private _activeItemIndex;
20
+ private _activeColumnIndex;
21
+ protected get options(): SbbAutocompleteGridOptionElement[];
22
+ private get _row();
23
+ protected onOptionClick(event: MouseEvent): void;
24
+ connectedCallback(): void;
25
+ protected syncNegative(): void;
26
+ protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
27
+ /**
28
+ * Select an element on 'Enter' keypress.
29
+ *
30
+ * Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
31
+ * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
32
+ * would always return a `SbbAutocompleteGridButtonElement`.
33
+ */
34
+ protected selectByKeyboard(): void;
35
+ protected setNextActiveOption(event: KeyboardEvent): void;
36
+ private _setNextHorizontalActiveElement;
37
+ protected resetActiveElement(): void;
38
+ protected setTriggerAttributes(element: HTMLInputElement): void;
39
+ }
40
+ declare global {
41
+ interface HTMLElementTagNameMap {
42
+ 'sbb-autocomplete-grid': SbbAutocompleteGridElement;
43
+ }
44
+ }
45
+ //# sourceMappingURL=autocomplete-grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../../../src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAQnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAWlF;;;;;;;;;;;GAWG;AACH,qBAKa,0BAA2B,SAAQ,0BAA0B;IACxE,SAAS,CAAC,SAAS,SAAuC;IAC1D,SAAS,CAAC,SAAS,SAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,SAAS,KAAK,OAAO,IAAI,gCAAgC,EAAE,CAE1D;IAED,OAAO,KAAK,IAAI,GAMf;IAED,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUhC,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA2BpE;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAYlC,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BzD,OAAO,CAAC,+BAA+B;IAmCvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAkBpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
@@ -0,0 +1,33 @@
1
+ import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
2
+ import { SbbActionBaseElement } from '../../core/base-elements.js';
3
+ import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
4
+
5
+ declare const SbbAutocompleteGridButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbActionBaseElement;
6
+ /**
7
+ * It displays an icon-only button that can be used in `sbb-autocomplete-grid`.
8
+ *
9
+ * @slot icon - Slot used to display the icon, if one is set
10
+ */
11
+ export declare class SbbAutocompleteGridButtonElement extends SbbAutocompleteGridButtonElement_base {
12
+ static styles: CSSResultGroup;
13
+ /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
14
+ get option(): SbbAutocompleteGridOptionElement | null;
15
+ /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
16
+ private _disabledFromGroup;
17
+ protected isDisabledExternally(): boolean;
18
+ /** MutationObserver on data attributes. */
19
+ private _optionAttributeObserver;
20
+ constructor();
21
+ protected renderTemplate(): TemplateResult;
22
+ connectedCallback(): void;
23
+ willUpdate(changedProperties: PropertyValues<this>): void;
24
+ disconnectedCallback(): void;
25
+ private _handleButtonClick;
26
+ }
27
+ declare global {
28
+ interface HTMLElementTagNameMap {
29
+ 'sbb-autocomplete-grid-button': SbbAutocompleteGridButtonElement;
30
+ }
31
+ }
32
+ export {};
33
+ //# sourceMappingURL=autocomplete-grid-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"autocomplete-grid-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAOnE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;;AAWvF;;;;GAIG;AACH,qBAOa,gCAAiC,SAAQ,qCAErD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+EAA+E;IAC/E,IAAW,MAAM,IAAI,gCAAgC,GAAG,IAAI,CAK3D;IAED,yFAAyF;IACzF,OAAO,CAAC,kBAAkB,CAAS;cAEhB,oBAAoB,IAAI,OAAO;IAIlD,2CAA2C;IAC3C,OAAO,CAAC,wBAAwB,CAO7B;;cAUgB,cAAc,IAAI,cAAc;IAInC,iBAAiB,IAAI,IAAI;IAWzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzD,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,kBAAkB,CAIxB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
@@ -0,0 +1,2 @@
1
+ export * from './autocomplete-grid-button/autocomplete-grid-button.js';
2
+ //# sourceMappingURL=autocomplete-grid-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"autocomplete-grid-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-button.ts"],"names":[],"mappings":"AAAA,cAAc,wDAAwD,CAAC"}