@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.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 (342) hide show
  1. package/{web-components.html-data → html-data}/en.json +155 -54
  2. package/package.json +14 -11
  3. package/scss/_components.scss +1 -1
  4. package/scss/_maps.scss +3 -1
  5. package/scss/_utils.scss +3 -1
  6. package/scss/_vars.scss +1 -0
  7. package/scss/base/_layout.scss +8 -8
  8. package/scss/base/_reboot.scss +4 -29
  9. package/scss/base/_root.scss +27 -12
  10. package/scss/colors/_index.scss +66 -1
  11. package/scss/components/_alert-dialog.scss +3 -3
  12. package/scss/components/_bordered-button.scss +2 -2
  13. package/scss/components/_bordered-prominent-button.scss +3 -3
  14. package/scss/components/_borderless-button.scss +2 -2
  15. package/scss/components/_confirmation-dialog.scss +1 -1
  16. package/scss/components/_content-unavailable.scss +1 -1
  17. package/scss/components/{_body-view.scss → _content-view.scss} +2 -2
  18. package/scss/components/_date-picker.scss +1 -1
  19. package/scss/components/_detail-placeholder.scss +5 -5
  20. package/scss/components/_disclosure-group.scss +2 -2
  21. package/scss/components/_fine-tooltip.scss +1 -1
  22. package/scss/components/_form-view.scss +3 -3
  23. package/scss/components/_full-screen.scss +1 -1
  24. package/scss/components/_glass-button.scss +2 -2
  25. package/scss/components/_glass-prominent-button.scss +3 -3
  26. package/scss/components/_group-box.scss +1 -1
  27. package/scss/components/_h-divider.scss +1 -1
  28. package/scss/components/_h-flex-stack.scss +3 -1
  29. package/scss/components/_h-stack.scss +1 -1
  30. package/scss/components/_image-view.scss +1 -1
  31. package/scss/components/_index.scss +34 -24
  32. package/scss/components/_label-view.scss +1 -1
  33. package/scss/components/_labeled-content.scss +1 -1
  34. package/scss/components/_list-view.scss +3 -3
  35. package/scss/components/_menu-view.scss +3 -3
  36. package/scss/components/_navigation-large-title.scss +15 -9
  37. package/scss/components/_navigation-split-view.scss +18 -18
  38. package/scss/components/_navigation-stack.scss +1 -1
  39. package/scss/components/_navigation-title.scss +1 -1
  40. package/scss/components/_picker-view.scss +159 -119
  41. package/scss/components/_plain-button.scss +2 -2
  42. package/scss/components/_progress-view.scss +1 -1
  43. package/scss/components/_scroll-view-proxy.scss +1 -1
  44. package/scss/components/_scroll-view-toolbars.scss +1 -1
  45. package/scss/components/_scroll-view.scss +2 -2
  46. package/scss/components/_search-view.scss +1 -1
  47. package/scss/components/_section-view.scss +1 -1
  48. package/scss/components/_sheet-view.scss +2 -2
  49. package/scss/components/_sidebar-toggle.scss +1 -1
  50. package/scss/components/_sidebar-view.scss +2 -2
  51. package/scss/components/_sticky-container.scss +1 -1
  52. package/scss/components/_tab-bar.scss +1 -1
  53. package/scss/components/_tab-item.scss +1 -1
  54. package/scss/components/_tab-view.scss +23 -15
  55. package/scss/components/_table-column.scss +1 -1
  56. package/scss/components/_table-row.scss +1 -1
  57. package/scss/components/_table-view.scss +1 -1
  58. package/scss/components/_text-field.scss +1 -1
  59. package/scss/components/_text-view.scss +1 -1
  60. package/scss/components/_toggle-view.scss +41 -21
  61. package/scss/components/_tool-bar-item-group.scss +1 -1
  62. package/scss/components/_tool-bar-item.scss +2 -2
  63. package/scss/components/_tool-bar.scss +2 -2
  64. package/scss/components/_v-divider.scss +1 -1
  65. package/scss/components/_v-flex-stack.scss +3 -1
  66. package/scss/components/_v-keyboard.scss +1 -1
  67. package/scss/components/_v-stack.scss +1 -1
  68. package/scss/final/_touch-glass.scss +2 -2
  69. package/scss/mixins/_index.scss +2 -2
  70. package/scss/placeholders/_buttons.scss +5 -5
  71. package/scss/placeholders/_lists.scss +3 -3
  72. package/scss/transitions/_alert-dialog.scss +1 -1
  73. package/scss/transitions/_bwd.navbar.scss +1 -1
  74. package/scss/transitions/_bwd.scss +3 -3
  75. package/scss/transitions/_confirmation-dialog.scss +1 -1
  76. package/scss/transitions/_disclosure-group.scss +1 -1
  77. package/scss/transitions/_fine-tooltip.scss +1 -1
  78. package/scss/transitions/_fwd.navbar.scss +1 -1
  79. package/scss/transitions/_fwd.scss +1 -1
  80. package/scss/transitions/_glass-button.scss +1 -1
  81. package/scss/transitions/_glass-prominent-button.scss +1 -1
  82. package/scss/transitions/_index.scss +1 -1
  83. package/scss/transitions/_menu-view.scss +1 -1
  84. package/scss/transitions/_navigation-split-view.scss +1 -1
  85. package/scss/transitions/_progress-view.scss +1 -1
  86. package/scss/transitions/_sheet-view.scss +1 -1
  87. package/scss/transitions/_sidebar-view.scss +1 -1
  88. package/scss/transitions/_tab-bar.scss +1 -1
  89. package/scss/utils/_background.scss +52 -0
  90. package/scss/utils/_frame.scss +2 -2
  91. package/scss/utils/_index.scss +33 -8
  92. package/scss/utils/_spacing.scss +1 -1
  93. package/scss/utils/_stacks.scss +5 -3
  94. package/generated/buses/alert-dialog.d.ts +0 -2
  95. package/generated/buses/alert-dialog.js +0 -1
  96. package/generated/buses/confirmation-dialog.d.ts +0 -2
  97. package/generated/buses/confirmation-dialog.js +0 -1
  98. package/generated/buses/index.d.ts +0 -6
  99. package/generated/buses/index.js +0 -6
  100. package/generated/buses/lifecycle-observer.d.ts +0 -2
  101. package/generated/buses/lifecycle-observer.js +0 -1
  102. package/generated/client/index.d.ts +0 -30
  103. package/generated/client/index.js +0 -279
  104. package/generated/components/alert-dialog.d.ts +0 -11
  105. package/generated/components/alert-dialog.js +0 -102
  106. package/generated/components/body-view.d.ts +0 -13
  107. package/generated/components/body-view.js +0 -17
  108. package/generated/components/bordered-button.d.ts +0 -17
  109. package/generated/components/bordered-button.js +0 -56
  110. package/generated/components/bordered-prominent-button.d.ts +0 -17
  111. package/generated/components/bordered-prominent-button.js +0 -56
  112. package/generated/components/borderless-button.d.ts +0 -17
  113. package/generated/components/borderless-button.js +0 -56
  114. package/generated/components/color-scheme.d.ts +0 -12
  115. package/generated/components/color-scheme.js +0 -54
  116. package/generated/components/confirmation-dialog.d.ts +0 -12
  117. package/generated/components/confirmation-dialog.js +0 -116
  118. package/generated/components/content-unavailable.d.ts +0 -30
  119. package/generated/components/content-unavailable.js +0 -82
  120. package/generated/components/date-picker.d.ts +0 -52
  121. package/generated/components/date-picker.js +0 -480
  122. package/generated/components/disclosure-group.d.ts +0 -17
  123. package/generated/components/disclosure-group.js +0 -66
  124. package/generated/components/fine-tooltip.d.ts +0 -15
  125. package/generated/components/fine-tooltip.js +0 -111
  126. package/generated/components/form-view.d.ts +0 -16
  127. package/generated/components/form-view.js +0 -65
  128. package/generated/components/glass-button.d.ts +0 -16
  129. package/generated/components/glass-button.js +0 -53
  130. package/generated/components/glass-prominent-button.d.ts +0 -16
  131. package/generated/components/glass-prominent-button.js +0 -53
  132. package/generated/components/h-stack.d.ts +0 -22
  133. package/generated/components/h-stack.js +0 -26
  134. package/generated/components/image-view.d.ts +0 -18
  135. package/generated/components/image-view.js +0 -68
  136. package/generated/components/index.d.ts +0 -47
  137. package/generated/components/index.js +0 -47
  138. package/generated/components/label-view.d.ts +0 -27
  139. package/generated/components/label-view.js +0 -87
  140. package/generated/components/labeled-content.d.ts +0 -27
  141. package/generated/components/labeled-content.js +0 -160
  142. package/generated/components/list-view.d.ts +0 -15
  143. package/generated/components/list-view.js +0 -22
  144. package/generated/components/menu-view.d.ts +0 -20
  145. package/generated/components/menu-view.js +0 -140
  146. package/generated/components/navigation-large-title.d.ts +0 -18
  147. package/generated/components/navigation-large-title.js +0 -188
  148. package/generated/components/navigation-split-view.d.ts +0 -15
  149. package/generated/components/navigation-split-view.js +0 -25
  150. package/generated/components/navigation-stack.d.ts +0 -15
  151. package/generated/components/navigation-stack.js +0 -29
  152. package/generated/components/navigation-title.d.ts +0 -18
  153. package/generated/components/navigation-title.js +0 -72
  154. package/generated/components/picker-view.d.ts +0 -68
  155. package/generated/components/picker-view.js +0 -1153
  156. package/generated/components/plain-button.d.ts +0 -7
  157. package/generated/components/plain-button.js +0 -22
  158. package/generated/components/progress-view.d.ts +0 -20
  159. package/generated/components/progress-view.js +0 -125
  160. package/generated/components/screen-view.d.ts +0 -5
  161. package/generated/components/screen-view.js +0 -11
  162. package/generated/components/scroll-view-proxy.d.ts +0 -13
  163. package/generated/components/scroll-view-proxy.js +0 -17
  164. package/generated/components/scroll-view.d.ts +0 -22
  165. package/generated/components/scroll-view.js +0 -237
  166. package/generated/components/search-view.d.ts +0 -12
  167. package/generated/components/search-view.js +0 -27
  168. package/generated/components/section-view.d.ts +0 -21
  169. package/generated/components/section-view.js +0 -64
  170. package/generated/components/sheet-view.d.ts +0 -11
  171. package/generated/components/sheet-view.js +0 -45
  172. package/generated/components/sidebar-toggle.d.ts +0 -15
  173. package/generated/components/sidebar-toggle.js +0 -88
  174. package/generated/components/sidebar-view.d.ts +0 -10
  175. package/generated/components/sidebar-view.js +0 -37
  176. package/generated/components/sticky-container.d.ts +0 -11
  177. package/generated/components/sticky-container.js +0 -26
  178. package/generated/components/tab-bar.d.ts +0 -10
  179. package/generated/components/tab-bar.js +0 -40
  180. package/generated/components/tab-item.d.ts +0 -10
  181. package/generated/components/tab-item.js +0 -134
  182. package/generated/components/tab-view.d.ts +0 -31
  183. package/generated/components/tab-view.js +0 -198
  184. package/generated/components/table-view.d.ts +0 -26
  185. package/generated/components/table-view.js +0 -161
  186. package/generated/components/text-field.d.ts +0 -42
  187. package/generated/components/text-field.js +0 -526
  188. package/generated/components/toggle-view.d.ts +0 -41
  189. package/generated/components/toggle-view.js +0 -370
  190. package/generated/components/tool-bar-item-group.d.ts +0 -13
  191. package/generated/components/tool-bar-item-group.js +0 -31
  192. package/generated/components/tool-bar-item.d.ts +0 -16
  193. package/generated/components/tool-bar-item.js +0 -69
  194. package/generated/components/tool-bar.d.ts +0 -26
  195. package/generated/components/tool-bar.js +0 -95
  196. package/generated/components/v-keyboard.d.ts +0 -20
  197. package/generated/components/v-keyboard.js +0 -89
  198. package/generated/components/v-stack.d.ts +0 -25
  199. package/generated/components/v-stack.js +0 -29
  200. package/generated/css/index.css +0 -10620
  201. package/generated/events/alert-dialog.d.ts +0 -13
  202. package/generated/events/alert-dialog.js +0 -1
  203. package/generated/events/confirmation-dialog.d.ts +0 -14
  204. package/generated/events/confirmation-dialog.js +0 -1
  205. package/generated/events/date-picker.d.ts +0 -13
  206. package/generated/events/date-picker.js +0 -1
  207. package/generated/events/index.d.ts +0 -9
  208. package/generated/events/index.js +0 -9
  209. package/generated/events/lifecycle-observer.d.ts +0 -18
  210. package/generated/events/lifecycle-observer.js +0 -1
  211. package/generated/events/picker-view.d.ts +0 -29
  212. package/generated/events/picker-view.js +0 -1
  213. package/generated/events/scroll-view.d.ts +0 -18
  214. package/generated/events/scroll-view.js +0 -1
  215. package/generated/events/tab-view.d.ts +0 -54
  216. package/generated/events/tab-view.js +0 -1
  217. package/generated/events/text-field.d.ts +0 -13
  218. package/generated/events/text-field.js +0 -1
  219. package/generated/events/toggle-view.d.ts +0 -14
  220. package/generated/events/toggle-view.js +0 -1
  221. package/generated/i18n/index.d.ts +0 -33
  222. package/generated/i18n/index.js +0 -164
  223. package/generated/i18n/locales/el.d.ts +0 -16
  224. package/generated/i18n/locales/el.js +0 -16
  225. package/generated/i18n/locales/en.d.ts +0 -16
  226. package/generated/i18n/locales/en.js +0 -16
  227. package/generated/i18n/locales/index.d.ts +0 -4
  228. package/generated/i18n/locales/index.js +0 -4
  229. package/generated/index.d.ts +0 -2
  230. package/generated/index.js +0 -3
  231. package/generated/internal/class/cleanup-registry.d.ts +0 -5
  232. package/generated/internal/class/cleanup-registry.js +0 -38
  233. package/generated/internal/class/css-style-observer.d.ts +0 -8
  234. package/generated/internal/class/css-style-observer.js +0 -26
  235. package/generated/internal/class/form-associated-base.d.ts +0 -16
  236. package/generated/internal/class/form-associated-base.js +0 -78
  237. package/generated/internal/class/mutation-observer-set.d.ts +0 -9
  238. package/generated/internal/class/mutation-observer-set.js +0 -42
  239. package/generated/internal/class/mutation-observer-singleton.d.ts +0 -10
  240. package/generated/internal/class/mutation-observer-singleton.js +0 -64
  241. package/generated/internal/class/navigation-path.d.ts +0 -15
  242. package/generated/internal/class/navigation-path.js +0 -84
  243. package/generated/internal/class/navigation-view.d.ts +0 -8
  244. package/generated/internal/class/navigation-view.js +0 -72
  245. package/generated/internal/class/resize-observer-singleton.d.ts +0 -7
  246. package/generated/internal/class/resize-observer-singleton.js +0 -22
  247. package/generated/internal/decorators/adaptive-slot.d.ts +0 -1
  248. package/generated/internal/decorators/adaptive-slot.js +0 -50
  249. package/generated/internal/decorators/custom-element.d.ts +0 -5
  250. package/generated/internal/decorators/custom-element.js +0 -5
  251. package/generated/internal/decorators/index.d.ts +0 -6
  252. package/generated/internal/decorators/index.js +0 -6
  253. package/generated/internal/decorators/microtask-on-connected.d.ts +0 -39
  254. package/generated/internal/decorators/microtask-on-connected.js +0 -67
  255. package/generated/internal/privateNamespace.d.ts +0 -14
  256. package/generated/internal/privateNamespace.js +0 -168
  257. package/generated/internal/utils/add.d.ts +0 -1
  258. package/generated/internal/utils/add.js +0 -7
  259. package/generated/internal/utils/cash/ancestors.d.ts +0 -1
  260. package/generated/internal/utils/cash/ancestors.js +0 -27
  261. package/generated/internal/utils/cash/index.d.ts +0 -24
  262. package/generated/internal/utils/cash/index.js +0 -27
  263. package/generated/internal/utils/cash/next-all.d.ts +0 -1
  264. package/generated/internal/utils/cash/next-all.js +0 -10
  265. package/generated/internal/utils/cash/next.d.ts +0 -1
  266. package/generated/internal/utils/cash/next.js +0 -9
  267. package/generated/internal/utils/cash/prev-all.d.ts +0 -1
  268. package/generated/internal/utils/cash/prev-all.js +0 -10
  269. package/generated/internal/utils/cash/prev.d.ts +0 -1
  270. package/generated/internal/utils/cash/prev.js +0 -9
  271. package/generated/internal/utils/cash/prop.d.ts +0 -18
  272. package/generated/internal/utils/cash/prop.js +0 -30
  273. package/generated/internal/utils/cash/siblings.d.ts +0 -1
  274. package/generated/internal/utils/cash/siblings.js +0 -10
  275. package/generated/internal/utils/clamp.d.ts +0 -1
  276. package/generated/internal/utils/clamp.js +0 -4
  277. package/generated/internal/utils/compare-big-decimals.d.ts +0 -1
  278. package/generated/internal/utils/compare-big-decimals.js +0 -80
  279. package/generated/internal/utils/css-time.d.ts +0 -1
  280. package/generated/internal/utils/css-time.js +0 -3
  281. package/generated/internal/utils/debounce.d.ts +0 -1
  282. package/generated/internal/utils/debounce.js +0 -13
  283. package/generated/internal/utils/define-translations.d.ts +0 -1
  284. package/generated/internal/utils/define-translations.js +0 -3
  285. package/generated/internal/utils/dev-flags.d.ts +0 -3
  286. package/generated/internal/utils/dev-flags.js +0 -5
  287. package/generated/internal/utils/ensure-placeholder.d.ts +0 -1
  288. package/generated/internal/utils/ensure-placeholder.js +0 -41
  289. package/generated/internal/utils/frame.d.ts +0 -1
  290. package/generated/internal/utils/frame.js +0 -6
  291. package/generated/internal/utils/index.d.ts +0 -20
  292. package/generated/internal/utils/index.js +0 -23
  293. package/generated/internal/utils/is-inside.d.ts +0 -1
  294. package/generated/internal/utils/is-inside.js +0 -4
  295. package/generated/internal/utils/kebab-case.d.ts +0 -1
  296. package/generated/internal/utils/kebab-case.js +0 -8
  297. package/generated/internal/utils/list-active.d.ts +0 -7
  298. package/generated/internal/utils/list-active.js +0 -83
  299. package/generated/internal/utils/microtask.d.ts +0 -1
  300. package/generated/internal/utils/microtask.js +0 -3
  301. package/generated/internal/utils/onoff.d.ts +0 -45
  302. package/generated/internal/utils/onoff.js +0 -31
  303. package/generated/internal/utils/set.d.ts +0 -1
  304. package/generated/internal/utils/set.js +0 -7
  305. package/generated/internal/utils/sleep.d.ts +0 -1
  306. package/generated/internal/utils/sleep.js +0 -3
  307. package/generated/internal/utils/slow-hide-show.d.ts +0 -1
  308. package/generated/internal/utils/slow-hide-show.js +0 -16
  309. package/generated/internal/utils/timeout.d.ts +0 -5
  310. package/generated/internal/utils/timeout.js +0 -16
  311. package/generated/internal/utils/touch-glass.d.ts +0 -7
  312. package/generated/internal/utils/touch-glass.js +0 -19
  313. package/generated/internal/vendor/morphdom.d.ts +0 -6
  314. package/generated/internal/vendor/morphdom.js +0 -720
  315. package/generated/morphdom/index.d.ts +0 -8
  316. package/generated/morphdom/index.js +0 -8
  317. package/generated/morphdom/morph.d.ts +0 -4
  318. package/generated/morphdom/morph.js +0 -10
  319. package/generated/morphdom/query-morph.d.ts +0 -5
  320. package/generated/morphdom/query-morph.js +0 -12
  321. package/generated/morphdom/render-to-string.d.ts +0 -12
  322. package/generated/morphdom/render-to-string.js +0 -48
  323. package/generated/morphdom/unsafe-html.d.ts +0 -2
  324. package/generated/morphdom/unsafe-html.js +0 -4
  325. package/generated/namespace-browser/base.d.ts +0 -45
  326. package/generated/namespace-browser/base.js +0 -115
  327. package/generated/namespace-browser/event.d.ts +0 -10
  328. package/generated/namespace-browser/event.js +0 -1
  329. package/generated/namespace-browser/index.d.ts +0 -7
  330. package/generated/namespace-browser/index.js +0 -1
  331. package/generated/snapshot/index.d.ts +0 -9
  332. package/generated/snapshot/index.js +0 -60
  333. package/generated/tpl/html.d.ts +0 -5
  334. package/generated/tpl/html.js +0 -7
  335. package/generated/tpl/index.d.ts +0 -6
  336. package/generated/tpl/index.js +0 -6
  337. package/generated/tpl/is-template-result.d.ts +0 -3
  338. package/generated/tpl/is-template-result.js +0 -1
  339. package/generated/tpl/render.d.ts +0 -2
  340. package/generated/tpl/render.js +0 -132
  341. /package/{web-components.css-data → css-data}/en.json +0 -0
  342. /package/scss/utils/{_scroll-view.scss → _scroll-view.scss.txt} +0 -0
@@ -1,7 +0,0 @@
1
- import { ButtonBase } from '../namespace-browser/base';
2
- export declare class PlainButton extends ButtonBase {
3
- #private;
4
- constructor();
5
- static polyfillDisconnectedCallback(el: PlainButton): void;
6
- static polyfillConnectedCallback(el: PlainButton): void;
7
- }
@@ -1,22 +0,0 @@
1
- import { CleanupRegistry } from '../internal/class/cleanup-registry';
2
- import { devFlags, onoff } from '../internal/utils';
3
- import { ButtonBase } from '../namespace-browser/base';
4
- export class PlainButton extends ButtonBase {
5
- constructor() {
6
- super();
7
- }
8
- static polyfillDisconnectedCallback(el) {
9
- if (devFlags.debug)
10
- console.debug(`${PlainButton.name} ⚡️ disconnect`);
11
- CleanupRegistry.unregister(el);
12
- }
13
- static polyfillConnectedCallback(el) {
14
- if (devFlags.debug)
15
- console.debug(`${PlainButton.name} ⚡️ connect`);
16
- el.tabIndex = 0;
17
- CleanupRegistry.register(el, onoff('click', PlainButton.#handleClick, el).on());
18
- }
19
- static #handleClick = async (evt) => {
20
- // alert(99)
21
- };
22
- }
@@ -1,20 +0,0 @@
1
- /**
2
- * @summary A view that shows how far along a task is.
3
- *
4
- * @slot — The default slot.
5
- * @slot current-value
6
- */
7
- export declare class ProgressView extends HTMLElement {
8
- #private;
9
- static get observedAttributes(): string[];
10
- get progressViewStyle(): "circular" | "linear";
11
- constructor();
12
- attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
13
- disconnectedCallback(): void;
14
- connectedCallback(): void;
15
- }
16
- declare global {
17
- interface HTMLElementTagNameMap {
18
- 'progress-view': ProgressView;
19
- }
20
- }
@@ -1,125 +0,0 @@
1
- var _a;
2
- import { CleanupRegistry } from '../internal/class/cleanup-registry';
3
- import { CSSStyleObserver } from '../internal/class/css-style-observer';
4
- import { $, devFlags } from '../internal/utils';
5
- import { queryMorph } from '../morphdom';
6
- import { Snapshot } from '../snapshot';
7
- import { html } from '../tpl';
8
- const progressViewStyles = ['circular', 'linear'];
9
- /**
10
- * @summary A view that shows how far along a task is.
11
- *
12
- * @slot — The default slot.
13
- * @slot current-value
14
- */
15
- export class ProgressView extends HTMLElement {
16
- static get observedAttributes() {
17
- return ['label', 'current-value-label', 'value'];
18
- }
19
- static #templates = new Map();
20
- #cssStyleObserver;
21
- #progressViewStyle;
22
- #lastRenderedStyle;
23
- #shadowRoot;
24
- #slots = new Map();
25
- get progressViewStyle() {
26
- return this.#progressViewStyle ?? 'circular';
27
- }
28
- get #template() {
29
- if (!_a.#templates.has(this.progressViewStyle))
30
- switch (this.progressViewStyle) {
31
- case 'linear':
32
- _a.#templates.set(this.progressViewStyle, $(html `
33
- <slot></slot>
34
- <div part="root progress-control progress-line-control"></div>
35
- <slot name="current-value"></slot>
36
- `));
37
- break;
38
- case 'circular':
39
- default:
40
- _a.#templates.set(this.progressViewStyle, $(html `
41
- <div part="root progress-control progress-circular-control">
42
- <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
43
- <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
44
- <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
45
- <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
46
- <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
47
- <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
48
- <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
49
- <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
50
- </div>
51
- <slot></slot>
52
- <slot name="current-value"></slot>
53
- `));
54
- break;
55
- }
56
- return _a.#templates.get(this.progressViewStyle);
57
- }
58
- constructor() {
59
- super();
60
- this.#shadowRoot = this.attachShadow({ mode: 'closed' });
61
- }
62
- attributeChangedCallback(name, oldValue, newValue) {
63
- if (devFlags.debug)
64
- console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
65
- switch (name) {
66
- case 'label': {
67
- const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
68
- if (newValue) {
69
- label.setAttribute('title', newValue);
70
- }
71
- else
72
- label.removeAttribute('title');
73
- break;
74
- }
75
- case 'current-value-label': {
76
- queryMorph('[slot=current-value]', html `<label-view slot="current-value" font="callout" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
77
- break;
78
- }
79
- }
80
- }
81
- disconnectedCallback() {
82
- if (devFlags.debug)
83
- console.debug(`${_a.name} ⚡️ disconnect`);
84
- CleanupRegistry.unregister(this);
85
- }
86
- connectedCallback() {
87
- if (devFlags.debug)
88
- console.debug(`${_a.name} ⚡️ connect`);
89
- this.inert = true;
90
- this.#cssStyleObserver = new CSSStyleObserver({
91
- properties: ['--progress-view-style-index'],
92
- });
93
- this.#cssStyleObserver.observe(this, this.#handleStyleChange);
94
- Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
95
- }
96
- #handleStyleChange = () => {
97
- if (devFlags.debug)
98
- console.debug(`${_a.name} ⚡️ style`);
99
- const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
100
- const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
101
- if (newValue === this.#progressViewStyle)
102
- return;
103
- this.#progressViewStyle = newValue;
104
- this.#render();
105
- };
106
- #render() {
107
- if (devFlags.debug)
108
- console.debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
109
- if (this.#lastRenderedStyle === this.#progressViewStyle)
110
- return; // skip if already applied
111
- this.#lastRenderedStyle = this.#progressViewStyle;
112
- this.#shadowRoot.replaceChildren(document.importNode(this.#template, true)); // clear shadow DOM
113
- CleanupRegistry.unregister(this, 'slots');
114
- for (const slot of this.#shadowRoot.querySelectorAll('slot'))
115
- this.#slots?.set(slot.name, slot);
116
- CleanupRegistry.register(this, () => {
117
- this.#slots = new Map();
118
- }, 'slots');
119
- switch (this.#progressViewStyle
120
- //
121
- ) {
122
- }
123
- }
124
- }
125
- _a = ProgressView;
@@ -1,5 +0,0 @@
1
- import { DialogBase } from '../namespace-browser/base';
2
- export declare class ScreenView extends DialogBase {
3
- constructor();
4
- disconnectedCallback(): void;
5
- }
@@ -1,11 +0,0 @@
1
- import { devFlags } from '../internal/utils';
2
- import { DialogBase } from '../namespace-browser/base';
3
- export class ScreenView extends DialogBase {
4
- constructor() {
5
- super();
6
- }
7
- disconnectedCallback() {
8
- if (devFlags.debug)
9
- console.debug(`${ScreenView.name} ⚡️ disconnect`);
10
- }
11
- }
@@ -1,13 +0,0 @@
1
- /**
2
- * @summary A wrapper for {hv}-stacks
3
- */
4
- export declare class ScrollViewProxy extends HTMLElement {
5
- constructor();
6
- disconnectedCallback(): void;
7
- connectedCallback(): void;
8
- }
9
- declare global {
10
- interface HTMLElementTagNameMap {
11
- 'scroll-view-proxy': ScrollViewProxy;
12
- }
13
- }
@@ -1,17 +0,0 @@
1
- import { devFlags } from '../internal/utils';
2
- /**
3
- * @summary A wrapper for {hv}-stacks
4
- */
5
- export class ScrollViewProxy extends HTMLElement {
6
- constructor() {
7
- super();
8
- }
9
- disconnectedCallback() {
10
- if (devFlags.debug)
11
- console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
12
- }
13
- connectedCallback() {
14
- if (devFlags.debug)
15
- console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
16
- }
17
- }
@@ -1,22 +0,0 @@
1
- /**
2
- * @summary A view that scrolls its content when it doesn’t fit the screen.
3
- *
4
- * @slot — The default slot.
5
- * @slot top-bar-principal
6
- * @slot bottom-bar-principal
7
- */
8
- export declare class ScrollView extends HTMLElement {
9
- #private;
10
- static get observedAttributes(): string[];
11
- static get template(): DocumentFragment;
12
- constructor();
13
- attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
14
- disconnectedCallback(): void;
15
- connectedCallback(): void;
16
- centerScrollToElement(child: Element): void;
17
- }
18
- declare global {
19
- interface HTMLElementTagNameMap {
20
- 'scroll-view': ScrollView;
21
- }
22
- }
@@ -1,237 +0,0 @@
1
- var _a;
2
- import { lifecycleObserver } from '../buses';
3
- import { CleanupRegistry } from '../internal/class/cleanup-registry';
4
- import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
5
- import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
6
- import { queryMorph } from '../morphdom';
7
- import { html } from '../tpl';
8
- const observers = new ResizeObserverSingleton();
9
- /**
10
- * @summary A view that scrolls its content when it doesn’t fit the screen.
11
- *
12
- * @slot — The default slot.
13
- * @slot top-bar-principal
14
- * @slot bottom-bar-principal
15
- */
16
- export class ScrollView extends HTMLElement {
17
- static get observedAttributes() {
18
- return [
19
- /**
20
- * Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"><span>Navigation Title</span></label-view></v-stack>`
21
- */
22
- 'navigation-title',
23
- 'navigation-inline-title',
24
- 'navigation-inline-subtitle',
25
- 'navigation-icon',
26
- 'navigation-bar-title-display-mode',
27
- ];
28
- }
29
- static #template;
30
- static get template() {
31
- return (this.#template ??= $(html `<slot></slot>
32
- <div part="root scroll-view-navbar">
33
- <div part="root scroll-view-navbar-stack">
34
- <slot name="top-bar-principal"></slot>
35
- </div>
36
- </div>
37
- <div part="root scroll-view-toolbar">
38
- <div part="root scroll-view-toolbar-stack">
39
- <slot name="bottom-bar-principal"></slot>
40
- </div>
41
- </div>`));
42
- }
43
- #shadowRoot;
44
- #slots = new Map();
45
- #isMidScroll;
46
- #lastScrollTop = 0;
47
- // #stopRecordingScrollTop?: boolean = false
48
- #beforeTabSwapLastScrolltop;
49
- constructor() {
50
- super();
51
- this.#shadowRoot = this.attachShadow({ mode: 'closed' });
52
- this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
53
- for (const slot of this.#shadowRoot.querySelectorAll('slot'))
54
- this.#slots?.set(slot.name, slot);
55
- CleanupRegistry.register(this, () => {
56
- this.#slots = new Map();
57
- });
58
- }
59
- attributeChangedCallback(name, oldValue, newValue) {
60
- if (devFlags.debug)
61
- console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
62
- switch (name) {
63
- case 'navigation-inline-title':
64
- this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
65
- break;
66
- case 'navigation-inline-subtitle':
67
- this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
68
- break;
69
- case 'navigation-title': {
70
- if (oldValue === newValue)
71
- return;
72
- this.#renderNavTitleComponent(newValue, null, this.getAttribute('navigation-icon'));
73
- break;
74
- }
75
- case 'navigation-bar-title-display-mode':
76
- if (oldValue === newValue)
77
- break;
78
- this.#syncSibling(`${oldValue}${newValue}`);
79
- break;
80
- }
81
- }
82
- disconnectedCallback() {
83
- if (devFlags.debug)
84
- console.debug(`${_a.name} ⚡️ disconnect`);
85
- CleanupRegistry.unregister(this);
86
- observers.unobserve(this);
87
- frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
88
- }
89
- connectedCallback() {
90
- if (devFlags.debug)
91
- console.debug(`${_a.name} ⚡️ connect`);
92
- CleanupRegistry.register(this, onoff([
93
- // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
94
- { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
95
- ], this.closest('tab-view') ?? undefined).on());
96
- CleanupRegistry.register(this, onoff([
97
- { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
98
- { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
99
- ], this).on());
100
- frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pageshow', { detail: { page: this }, bubbles: true, composed: true })));
101
- observers.observe(this, this.#handleMeasure.bind(this));
102
- // frame(this).then((r) => {
103
- // if (!r) return
104
- // let first = true
105
- // observeResizeEnd(this, () => {
106
- // if (first) {
107
- // first = false
108
- // return
109
- // }
110
- // this.dispatchEvent(new CustomEvent('resizeend', { bubbles: true, composed: true }))
111
- // })
112
- // })
113
- }
114
- #syncSibling = (comp) => {
115
- if (!this.isConnected)
116
- return;
117
- if (this.closest('[hidden]'))
118
- return; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
119
- if (!this.#isMidScroll)
120
- return;
121
- const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
122
- slowHideShow('largeinline' === `${comp}` ? 'show' : 'hide', title);
123
- };
124
- #handleScroll = ({ target, type }) => {
125
- if (devFlags.debug)
126
- console.debug(`${_a.name} ⚡️ ${type}`);
127
- if (!this.#isMidScroll)
128
- this.#isMidScroll = true;
129
- // if (this.#stopRecordingScrollTop) return
130
- if (!(target instanceof HTMLElement))
131
- return;
132
- this.#lastScrollTop = target.scrollTop;
133
- };
134
- #handleScrollend = (evt) => {
135
- if (devFlags.debug)
136
- console.debug(`${_a.name} ⚡️ ${evt?.type}`);
137
- if (this.#isMidScroll)
138
- this.#isMidScroll = false;
139
- };
140
- #handleMeasure = (entry) => {
141
- if (devFlags.debug)
142
- console.debug(`${_a.name} ⚡️ measure`);
143
- if (0 === entry.contentRect.width + entry.contentRect.height)
144
- return;
145
- if (undefined === this.#beforeTabSwapLastScrolltop)
146
- return;
147
- if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop)
148
- return;
149
- // this.#stopRecordingScrollTop = true
150
- entry.target.scrollTop = this.#beforeTabSwapLastScrolltop;
151
- // entry.target.scrollTo({
152
- // top: this.#beforeTabSwapLastScrolltop,
153
- // behavior: 'smooth',
154
- // }) //
155
- // this.#stopRecordingScrollTop = false
156
- this.#beforeTabSwapLastScrolltop = undefined;
157
- };
158
- // #handleTabReveal = ({ type, target }: CustomEvent<TabDetail>) => {
159
- // if (devFlags.debug) console.debug(`${ScrollView.name} ⚡️ ${type}`)
160
- // if (!(target instanceof HTMLElement)) return
161
- // if (!target.contains(this)) return
162
- // if (this.closest('[hidden]')) return
163
- // // console.log(888, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
164
- // // this.style.setProperty('clip-path', 'inset(50%)')
165
- // // this.style.setProperty('opacity', '0.001')
166
- // // this.style.opacity = '0.001'
167
- // // console.log(99, this.style.opacity)
168
- // // self.requestAnimationFrame(() => {
169
- // // if (undefined === this.#beforeTabSwapLastScrolltop) return
170
- // // if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop) return
171
- // // this.#stopRecordingScrollTop = true
172
- // // // console.log(999, this.#beforeTabSwapLastScrolltop)
173
- // // // console.log(999, this, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
174
- // // this.scrollTop = this.#beforeTabSwapLastScrolltop
175
- // // // this.scrollTo({
176
- // // // top: this.#beforeTabSwapLastScrolltop,
177
- // // // behavior: 'instant',
178
- // // // }) //
179
- // // this.#stopRecordingScrollTop = false
180
- // // this.#beforeTabSwapLastScrolltop = undefined
181
- // // // self.requestAnimationFrame(() => {
182
- // // // // this.style.removeProperty('opacity')
183
- // // // })
184
- // // })
185
- // }
186
- #handleTabBeforeswap = ({ type, target }) => {
187
- if (devFlags.debug)
188
- console.debug(`${_a.name} ⚡️ ${type}`);
189
- if (!(target instanceof HTMLElement))
190
- return;
191
- if (!target.contains(this))
192
- return;
193
- if (this.closest('[hidden]'))
194
- return;
195
- this.#beforeTabSwapLastScrolltop = this.scrollTop; //#lastScrollTop
196
- };
197
- centerScrollToElement(child) {
198
- // scrollTop needed to center child
199
- const parentRect = this.getBoundingClientRect(), childRect = child.getBoundingClientRect();
200
- // current scroll + offset of child relative to parent
201
- const top = this.scrollTop + childRect.top - parentRect.top - parentRect.height / 2 + childRect.height / 2;
202
- this.scrollTo({
203
- top,
204
- behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant', // optional: smooth scroll
205
- });
206
- }
207
- #renderNavTitle = (title, subtitle) => {
208
- // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
209
- // subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`
210
- // const vStack =
211
- // this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'))
212
- // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
213
- // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
214
- // const container = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"></v-stack>`, '>1'))
215
- queryMorph('[slot=top-bar-principal]', html `<v-stack spacing="0" alignment="fill" slot="top-bar-principal">
216
- ${title ? html `<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
217
- ${subtitle ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
218
- </v-stack>`, this);
219
- // render(
220
- // html`
221
- // ${title ? html`<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
222
- // ${subtitle ? html`<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
223
- // `,
224
- // container
225
- // )
226
- };
227
- #renderNavTitleComponent = (title, subtitle, icon) => {
228
- if (!title)
229
- return this.querySelector(':scope>v-stack>navigation-title:not([slot])')?.remove?.();
230
- // const container = ((vs = this.querySelector<HTMLElement>(':scope>v-stack') ?? (this.appendChild($(`<v-stack></v-stack>`, '>1')) as HTMLElement)) =>
231
- // vs.querySelector<HTMLElement>(':scope>navigation-title:not([slot])') ??
232
- // vs.appendChild($(html`<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`.toString(), '>1')))()
233
- const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(html `<v-stack></v-stack>`, '>1'));
234
- queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
235
- };
236
- }
237
- _a = ScrollView;
@@ -1,12 +0,0 @@
1
- import { InputBase } from '../namespace-browser/base';
2
- export declare class SearchView extends InputBase {
3
- constructor();
4
- static polyfillDisconnectedCallback(el: InputBase): void;
5
- static polyfillConnectedCallback(el: InputBase): void;
6
- static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
7
- }
8
- declare global {
9
- interface HTMLElementTagNameMap {
10
- 'search-view': SearchView;
11
- }
12
- }
@@ -1,27 +0,0 @@
1
- import { CleanupRegistry } from '../internal/class/cleanup-registry';
2
- import { devFlags, onoff, touchGlass } from '../internal/utils';
3
- import { InputBase } from '../namespace-browser/base';
4
- export class SearchView extends InputBase {
5
- constructor() {
6
- super();
7
- }
8
- static polyfillDisconnectedCallback(el) {
9
- if (devFlags.debug)
10
- console.debug(`${SearchView.name} ⚡️ disconnect`);
11
- CleanupRegistry.unregister(el);
12
- }
13
- static polyfillConnectedCallback(el) {
14
- if (devFlags.debug)
15
- console.debug(`${SearchView.name} ⚡️ connect`);
16
- CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
17
- el.type = 'search';
18
- }
19
- static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
20
- if (devFlags.debug)
21
- console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
22
- const node = target instanceof HTMLInputElement;
23
- if (!node)
24
- return;
25
- //
26
- }
27
- }
@@ -1,21 +0,0 @@
1
- /**
2
- * @summary A container view that groups related content together.
3
- *
4
- * @slot — The default slot.
5
- * @slot header
6
- * @slot footer
7
- */
8
- export declare class SectionView extends HTMLElement {
9
- #private;
10
- static get observedAttributes(): string[];
11
- static get template(): DocumentFragment;
12
- constructor();
13
- attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
14
- disconnectedCallback(): void;
15
- connectedCallback(): void;
16
- }
17
- declare global {
18
- interface HTMLElementTagNameMap {
19
- 'section-view': SectionView;
20
- }
21
- }
@@ -1,64 +0,0 @@
1
- import { $, devFlags } from '../internal/utils';
2
- import { queryMorph } from '../morphdom';
3
- import { html } from '../tpl';
4
- /**
5
- * @summary A container view that groups related content together.
6
- *
7
- * @slot — The default slot.
8
- * @slot header
9
- * @slot footer
10
- */
11
- export class SectionView extends HTMLElement {
12
- static get observedAttributes() {
13
- return ['header', 'footer'];
14
- }
15
- static #template;
16
- static get template() {
17
- return (this.#template ??= $(html `<div part="root section-main-stack">
18
- <slot></slot>
19
- </div>
20
- <div part="root section-header-stack">
21
- <slot name="header"></slot>
22
- </div>
23
- <div part="root section-footer-stack">
24
- <slot name="footer"></slot>
25
- </div>`));
26
- // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
27
- }
28
- #shadowRoot;
29
- constructor() {
30
- super();
31
- this.#shadowRoot = this.attachShadow({ mode: 'closed' });
32
- this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
33
- }
34
- attributeChangedCallback(name, oldValue, newValue) {
35
- if (devFlags.debug)
36
- console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
37
- switch (name) {
38
- case 'header':
39
- queryMorph('[slot=header]', html `<header slot="header">
40
- <label-view line-limit="1" truncation-mode="tail" font="callout">
41
- <span>${newValue}</span>
42
- </label-view>
43
- </header>`, this, { removeIf: !newValue });
44
- break;
45
- case 'footer':
46
- queryMorph('[slot=footer]', html `<footer slot="footer">
47
- <label-view line-limit="1" truncation-mode="tail" font="callout">
48
- <span>${newValue}</span>
49
- </label-view>
50
- </footer>`, this, { removeIf: !newValue });
51
- break;
52
- }
53
- }
54
- disconnectedCallback() {
55
- if (devFlags.debug)
56
- console.debug(`${SectionView.name} ⚡️ disconnect`);
57
- //
58
- }
59
- connectedCallback() {
60
- if (devFlags.debug)
61
- console.debug(`${SectionView.name} ⚡️ connect`);
62
- //
63
- }
64
- }
@@ -1,11 +0,0 @@
1
- import { DialogBase } from '../namespace-browser/base';
2
- /**
3
- * @summary A dialog that slides up over the current screen.
4
- */
5
- export declare class SheetView extends DialogBase {
6
- #private;
7
- constructor();
8
- static polyfillDisconnectedCallback(el: SheetView): void;
9
- static polyfillConnectedCallback(el: SheetView): void;
10
- static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
11
- }