@universal-material/web 3.7.2 → 3.8.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 (181) hide show
  1. package/app-bar/top-app-bar.d.ts +15 -0
  2. package/app-bar/top-app-bar.d.ts.map +1 -1
  3. package/app-bar/top-app-bar.js +15 -0
  4. package/app-bar/top-app-bar.js.map +1 -1
  5. package/badge/badge.d.ts +3 -0
  6. package/badge/badge.d.ts.map +1 -1
  7. package/badge/badge.js +3 -0
  8. package/badge/badge.js.map +1 -1
  9. package/bundle.min.js +600 -482
  10. package/button/button-base.d.ts +7 -0
  11. package/button/button-base.d.ts.map +1 -1
  12. package/button/button-base.js +7 -0
  13. package/button/button-base.js.map +1 -1
  14. package/button/button.d.ts +3 -0
  15. package/button/button.d.ts.map +1 -1
  16. package/button/button.js +3 -0
  17. package/button/button.js.map +1 -1
  18. package/button/icon-button.d.ts +6 -0
  19. package/button/icon-button.d.ts.map +1 -1
  20. package/button/icon-button.js +6 -0
  21. package/button/icon-button.js.map +1 -1
  22. package/button-field/button-field.d.ts +3 -0
  23. package/button-field/button-field.d.ts.map +1 -1
  24. package/button-field/button-field.js +3 -0
  25. package/button-field/button-field.js.map +1 -1
  26. package/calendar/calendar-adapter.d.ts +3 -0
  27. package/calendar/calendar-adapter.d.ts.map +1 -1
  28. package/calendar/calendar-adapter.js.map +1 -1
  29. package/calendar/calendar-base.d.ts +17 -0
  30. package/calendar/calendar-base.d.ts.map +1 -1
  31. package/calendar/calendar-base.js +182 -19
  32. package/calendar/calendar-base.js.map +1 -1
  33. package/calendar/calendar.d.ts +4 -0
  34. package/calendar/calendar.d.ts.map +1 -1
  35. package/calendar/calendar.js +4 -0
  36. package/calendar/calendar.js.map +1 -1
  37. package/calendar/default-calendar-adapter.d.ts +3 -0
  38. package/calendar/default-calendar-adapter.d.ts.map +1 -1
  39. package/calendar/default-calendar-adapter.js +17 -5
  40. package/calendar/default-calendar-adapter.js.map +1 -1
  41. package/card/card-content.d.ts +5 -0
  42. package/card/card-content.d.ts.map +1 -1
  43. package/card/card-content.js +5 -0
  44. package/card/card-content.js.map +1 -1
  45. package/card/card-media.d.ts +3 -0
  46. package/card/card-media.d.ts.map +1 -1
  47. package/card/card-media.js +3 -0
  48. package/card/card-media.js.map +1 -1
  49. package/checkbox/checkbox.d.ts +7 -0
  50. package/checkbox/checkbox.d.ts.map +1 -1
  51. package/checkbox/checkbox.js +7 -0
  52. package/checkbox/checkbox.js.map +1 -1
  53. package/chip/chip.d.ts +3 -0
  54. package/chip/chip.d.ts.map +1 -1
  55. package/chip/chip.js +3 -0
  56. package/chip/chip.js.map +1 -1
  57. package/chip-field/chip-field.d.ts +3 -0
  58. package/chip-field/chip-field.d.ts.map +1 -1
  59. package/chip-field/chip-field.js.map +1 -1
  60. package/custom-elements.json +12881 -9853
  61. package/datepicker/datepicker.d.ts +51 -2
  62. package/datepicker/datepicker.d.ts.map +1 -1
  63. package/datepicker/datepicker.js +185 -3
  64. package/datepicker/datepicker.js.map +1 -1
  65. package/datepicker/format.d.ts +19 -0
  66. package/datepicker/format.d.ts.map +1 -0
  67. package/datepicker/format.js +47 -0
  68. package/datepicker/format.js.map +1 -0
  69. package/datepicker/range-datepicker.d.ts +56 -0
  70. package/datepicker/range-datepicker.d.ts.map +1 -0
  71. package/datepicker/range-datepicker.js +198 -0
  72. package/datepicker/range-datepicker.js.map +1 -0
  73. package/dialog/dialog.d.ts +8 -0
  74. package/dialog/dialog.d.ts.map +1 -1
  75. package/dialog/dialog.js +8 -0
  76. package/dialog/dialog.js.map +1 -1
  77. package/field/field-base.d.ts +14 -0
  78. package/field/field-base.d.ts.map +1 -1
  79. package/field/field-base.js +10 -0
  80. package/field/field-base.js.map +1 -1
  81. package/field/field.d.ts +4 -0
  82. package/field/field.d.ts.map +1 -1
  83. package/field/field.js +4 -0
  84. package/field/field.js.map +1 -1
  85. package/index.d.ts +5 -0
  86. package/index.d.ts.map +1 -1
  87. package/index.js +5 -0
  88. package/index.js.map +1 -1
  89. package/list/list-item.d.ts +3 -0
  90. package/list/list-item.d.ts.map +1 -1
  91. package/list/list-item.js +3 -0
  92. package/list/list-item.js.map +1 -1
  93. package/menu/menu-item.d.ts +6 -0
  94. package/menu/menu-item.d.ts.map +1 -1
  95. package/menu/menu-item.js +6 -0
  96. package/menu/menu-item.js.map +1 -1
  97. package/menu/menu.d.ts +16 -0
  98. package/menu/menu.d.ts.map +1 -1
  99. package/menu/menu.js +24 -5
  100. package/menu/menu.js.map +1 -1
  101. package/menu/menu.styles.d.ts.map +1 -1
  102. package/menu/menu.styles.js +5 -0
  103. package/menu/menu.styles.js.map +1 -1
  104. package/navigation/drawer-headline.styles.js +1 -1
  105. package/navigation/drawer-headline.styles.js.map +1 -1
  106. package/overflow-menu/overflow-menu-item.d.ts +8 -0
  107. package/overflow-menu/overflow-menu-item.d.ts.map +1 -1
  108. package/overflow-menu/overflow-menu-item.js +8 -0
  109. package/overflow-menu/overflow-menu-item.js.map +1 -1
  110. package/package.json +3 -3
  111. package/progress/circular-progress.d.ts +7 -0
  112. package/progress/circular-progress.d.ts.map +1 -1
  113. package/progress/circular-progress.js +3 -0
  114. package/progress/circular-progress.js.map +1 -1
  115. package/progress/progress-bar.d.ts +7 -0
  116. package/progress/progress-bar.d.ts.map +1 -1
  117. package/progress/progress-bar.js +3 -0
  118. package/progress/progress-bar.js.map +1 -1
  119. package/radio/radio.d.ts +3 -0
  120. package/radio/radio.d.ts.map +1 -1
  121. package/radio/radio.js +3 -0
  122. package/radio/radio.js.map +1 -1
  123. package/search/search.d.ts +3 -0
  124. package/search/search.d.ts.map +1 -1
  125. package/search/search.js +3 -0
  126. package/search/search.js.map +1 -1
  127. package/select/option.d.ts +6 -0
  128. package/select/option.d.ts.map +1 -1
  129. package/select/option.js +6 -0
  130. package/select/option.js.map +1 -1
  131. package/select/select.d.ts +4 -0
  132. package/select/select.d.ts.map +1 -1
  133. package/select/select.js +4 -0
  134. package/select/select.js.map +1 -1
  135. package/shared/button-wrapper.d.ts +3 -0
  136. package/shared/button-wrapper.d.ts.map +1 -1
  137. package/shared/button-wrapper.js.map +1 -1
  138. package/shared/char-count-text-field/native-text-field-wrapper.d.ts +13 -0
  139. package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -1
  140. package/shared/char-count-text-field/native-text-field-wrapper.js +10 -0
  141. package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -1
  142. package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
  143. package/shared/selection-control/selection-control-list-item.js +4 -0
  144. package/shared/selection-control/selection-control-list-item.js.map +1 -1
  145. package/shared/selection-control/selection-control.d.ts +9 -0
  146. package/shared/selection-control/selection-control.d.ts.map +1 -1
  147. package/shared/selection-control/selection-control.js +9 -0
  148. package/shared/selection-control/selection-control.js.map +1 -1
  149. package/shared/text-field-base/text-field-base.d.ts +3 -0
  150. package/shared/text-field-base/text-field-base.d.ts.map +1 -1
  151. package/shared/text-field-base/text-field-base.js +3 -0
  152. package/shared/text-field-base/text-field-base.js.map +1 -1
  153. package/snackbar/snackbar.d.ts +9 -0
  154. package/snackbar/snackbar.d.ts.map +1 -1
  155. package/snackbar/snackbar.js +9 -0
  156. package/snackbar/snackbar.js.map +1 -1
  157. package/tab-bar/tab-bar.d.ts +3 -0
  158. package/tab-bar/tab-bar.d.ts.map +1 -1
  159. package/tab-bar/tab-bar.js +3 -0
  160. package/tab-bar/tab-bar.js.map +1 -1
  161. package/tab-bar/tab.d.ts +5 -0
  162. package/tab-bar/tab.d.ts.map +1 -1
  163. package/tab-bar/tab.js +5 -0
  164. package/tab-bar/tab.js.map +1 -1
  165. package/text-area/text-area.d.ts +3 -0
  166. package/text-area/text-area.d.ts.map +1 -1
  167. package/text-area/text-area.js +3 -0
  168. package/text-area/text-area.js.map +1 -1
  169. package/text-field/text-field.d.ts +16 -0
  170. package/text-field/text-field.d.ts.map +1 -1
  171. package/text-field/text-field.js +7 -0
  172. package/text-field/text-field.js.map +1 -1
  173. package/typeahead/typeahead-template-render.d.ts +4 -0
  174. package/typeahead/typeahead-template-render.d.ts.map +1 -1
  175. package/typeahead/typeahead-template-render.js +4 -0
  176. package/typeahead/typeahead-template-render.js.map +1 -1
  177. package/typeahead/typeahead.d.ts +7 -0
  178. package/typeahead/typeahead.d.ts.map +1 -1
  179. package/typeahead/typeahead.js +7 -0
  180. package/typeahead/typeahead.js.map +1 -1
  181. package/vscode.html-custom-data.json +661 -230
@@ -5,9 +5,24 @@ export declare class UmTopAppBar extends LitElement {
5
5
  static styles: import("lit").CSSResult[];
6
6
  private _hasLeadingIcon;
7
7
  private _hasTrailingIcon;
8
+ /**
9
+ * The positioning strategy of the app bar
10
+ */
8
11
  position: 'fixed' | 'absolute' | 'static';
12
+ /**
13
+ * The height variant of the app bar
14
+ */
9
15
  size: 'small' | 'medium' | 'large';
16
+ /**
17
+ * The headline text rendered inside the app bar
18
+ */
10
19
  headline: string;
20
+ /**
21
+ * The element to listen for scroll on to collapse the extended content.
22
+ * Accepts an `HTMLElement`, the id of an element, `'window'` to use the
23
+ * window scroll, or `'none'` to disable scroll handling. Defaults to
24
+ * `'window'` when no value is provided.
25
+ */
11
26
  get scrollContainer(): 'none' | 'window' | string | undefined;
12
27
  set scrollContainer(idOrElement: string | HTMLElement | undefined);
13
28
  containerScrolled: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;IAErC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IAG1C,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAGpD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEjC,QAAQ,SAAM;IAE1B,IACI,eAAe,IAAI,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE5D;IAED,IAAI,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAShE;IAEQ,iBAAiB,UAAS;IAGnC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IACxD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAEpE,OAAO,CAAC,qBAAqB,CAA+B;IAE5D,OAAO,CAAC,sBAAsB,CAGd;IAEhB,OAAO,CAAC,kBAAkB;IAyBjB,MAAM,IAAI,kBAAkB;cA0ClB,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAKpD,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAO9C,iBAAiB;IAMjB,oBAAoB;IAgC7B,OAAO,CAAC,MAAM,CAAC,aAAa;CAe7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
1
+ {"version":3,"file":"top-app-bar.d.ts","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BAAwB;IAErC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IAE1C;;OAEG;IAEH,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEpD;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7C;;OAEG;IACS,QAAQ,SAAM;IAE1B;;;;;OAKG;IACH,IACI,eAAe,IAAI,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE5D;IAED,IAAI,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAShE;IAEQ,iBAAiB,UAAS;IAGnC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IACxD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAEpE,OAAO,CAAC,qBAAqB,CAA+B;IAE5D,OAAO,CAAC,sBAAsB,CAGd;IAEhB,OAAO,CAAC,kBAAkB;IAyBjB,MAAM,IAAI,kBAAkB;cA0ClB,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAKpD,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAO9C,iBAAiB;IAMjB,oBAAoB;IAgC7B,OAAO,CAAC,MAAM,CAAC,aAAa;CAe7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
@@ -11,8 +11,17 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
11
11
  super(...arguments);
12
12
  this._hasLeadingIcon = false;
13
13
  this._hasTrailingIcon = false;
14
+ /**
15
+ * The positioning strategy of the app bar
16
+ */
14
17
  this.position = 'fixed';
18
+ /**
19
+ * The height variant of the app bar
20
+ */
15
21
  this.size = 'small';
22
+ /**
23
+ * The headline text rendered inside the app bar
24
+ */
16
25
  this.headline = '';
17
26
  this.containerScrolled = false;
18
27
  this.containerSizeObserver = null;
@@ -36,6 +45,12 @@ let UmTopAppBar = class UmTopAppBar extends LitElement {
36
45
  }
37
46
  static { UmTopAppBar_1 = this; }
38
47
  static { this.styles = [baseStyles, styles]; }
48
+ /**
49
+ * The element to listen for scroll on to collapse the extended content.
50
+ * Accepts an `HTMLElement`, the id of an element, `'window'` to use the
51
+ * window scroll, or `'none'` to disable scroll handling. Defaults to
52
+ * `'window'` when no value is provided.
53
+ */
39
54
  get scrollContainer() {
40
55
  return this.attributes.getNamedItem('scrollContainer')?.value;
41
56
  }
@@ -1 +1 @@
1
- {"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n @state() private _hasLeadingIcon = false;\n @state() private _hasTrailingIcon = false;\n\n @property({ reflect: true })\n position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n @property({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'small';\n\n @property() headline = '';\n\n @property({ reflect: true })\n get scrollContainer(): 'none' | 'window' | string | undefined {\n return this.attributes.getNamedItem('scrollContainer')?.value;\n }\n\n set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n if (idOrElement === 'none') {\n return;\n }\n\n this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n }\n\n @state() containerScrolled = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('.container', true) private readonly _container!: HTMLElement;\n @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n private containerSizeObserver: ResizeObserver | null = null;\n\n private scrollContainerElement: {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null = null;\n\n private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n | {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined {\n if (idOrElement instanceof HTMLElement) {\n return idOrElement;\n }\n\n if (idOrElement === 'window') {\n return window;\n }\n\n return document.getElementById(idOrElement!)!;\n }\n\n #handleLeadingIconSlotChange() {\n this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleTrailingIconSlotChange() {\n this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n override render(): HTMLTemplateResult {\n const extendedContent = html`\n <div class=\"extended-content\" part=\"extended-content\">\n <slot name=\"extended-content\">${this.headline}</slot>\n </div>\n `;\n\n const containerClasses = classMap({\n [this.position]: true,\n [this.size]: true,\n scrolled: this.containerScrolled,\n 'has-leading-icon': this._hasLeadingIcon,\n 'has-trailing-icon': this._hasTrailingIcon,\n });\n\n const appBarSpacing = this.position !== 'static'\n ? html`<div class=\"spacing\"></div>`\n : nothing;\n\n return html`\n ${appBarSpacing}\n <div class=\"container ${containerClasses}\" part=\"container\">\n <div class=\"content\" part=\"content\">\n <div class=\"icon leading-icon\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot>\n <span>${this.headline}</span>\n </slot>\n </div>\n\n <div class=\"icon trailing-icon\" part=\"icon trailing\">\n <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n </div>\n </div>\n <slot name=\"additional-content\"></slot>\n </div>\n ${this.size !== 'small' ? extendedContent : nothing}\n `;\n }\n\n protected override updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n this.#updateScroll();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n this.containerSizeObserver.observe(this._container);\n this.#setContentHeightProperty();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.scrollContainer = this.scrollContainer || 'window';\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.containerSizeObserver!.disconnect();\n this.containerSizeObserver = null;\n }\n\n readonly #updateScroll = () => {\n const container = this.scrollContainerElement ?? window;\n\n const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n const scrollTop = UmTopAppBar._getScrollTop(container as any);\n\n this.containerScrolled = scrollTop > extendedContentHeight;\n\n this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n if (extendedContentHeight === 0) {\n return;\n }\n\n const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n if (scrollTop > scrollOffset) {\n this._extendedContent.style.opacity = '0';\n return;\n }\n\n this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n };\n\n private static _getScrollTop(container: HTMLElement & Window): number {\n if (typeof container.scrollY === 'number') {\n return container.scrollY;\n }\n\n if (typeof container.scrollTop === 'number') {\n return container.scrollTop;\n }\n\n return document.body.scrollTop;\n }\n\n #setContentHeightProperty() {\n this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-top-app-bar': UmTopAppBar;\n }\n}\n"]}
1
+ {"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n @state() private _hasLeadingIcon = false;\n @state() private _hasTrailingIcon = false;\n\n /**\n * The positioning strategy of the app bar\n */\n @property({ reflect: true })\n position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n /**\n * The height variant of the app bar\n */\n @property({ reflect: true })\n size: 'small' | 'medium' | 'large' = 'small';\n\n /**\n * The headline text rendered inside the app bar\n */\n @property() headline = '';\n\n /**\n * The element to listen for scroll on to collapse the extended content.\n * Accepts an `HTMLElement`, the id of an element, `'window'` to use the\n * window scroll, or `'none'` to disable scroll handling. Defaults to\n * `'window'` when no value is provided.\n */\n @property({ reflect: true })\n get scrollContainer(): 'none' | 'window' | string | undefined {\n return this.attributes.getNamedItem('scrollContainer')?.value;\n }\n\n set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n if (idOrElement === 'none') {\n return;\n }\n\n this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n }\n\n @state() containerScrolled = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('.container', true) private readonly _container!: HTMLElement;\n @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n private containerSizeObserver: ResizeObserver | null = null;\n\n private scrollContainerElement: {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null = null;\n\n private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n | {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined {\n if (idOrElement instanceof HTMLElement) {\n return idOrElement;\n }\n\n if (idOrElement === 'window') {\n return window;\n }\n\n return document.getElementById(idOrElement!)!;\n }\n\n #handleLeadingIconSlotChange() {\n this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleTrailingIconSlotChange() {\n this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n override render(): HTMLTemplateResult {\n const extendedContent = html`\n <div class=\"extended-content\" part=\"extended-content\">\n <slot name=\"extended-content\">${this.headline}</slot>\n </div>\n `;\n\n const containerClasses = classMap({\n [this.position]: true,\n [this.size]: true,\n scrolled: this.containerScrolled,\n 'has-leading-icon': this._hasLeadingIcon,\n 'has-trailing-icon': this._hasTrailingIcon,\n });\n\n const appBarSpacing = this.position !== 'static'\n ? html`<div class=\"spacing\"></div>`\n : nothing;\n\n return html`\n ${appBarSpacing}\n <div class=\"container ${containerClasses}\" part=\"container\">\n <div class=\"content\" part=\"content\">\n <div class=\"icon leading-icon\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot>\n <span>${this.headline}</span>\n </slot>\n </div>\n\n <div class=\"icon trailing-icon\" part=\"icon trailing\">\n <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n </div>\n </div>\n <slot name=\"additional-content\"></slot>\n </div>\n ${this.size !== 'small' ? extendedContent : nothing}\n `;\n }\n\n protected override updated(_changedProperties: PropertyValues) {\n super.updated(_changedProperties);\n this.#updateScroll();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n this.containerSizeObserver.observe(this._container);\n this.#setContentHeightProperty();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.scrollContainer = this.scrollContainer || 'window';\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.containerSizeObserver!.disconnect();\n this.containerSizeObserver = null;\n }\n\n readonly #updateScroll = () => {\n const container = this.scrollContainerElement ?? window;\n\n const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n const scrollTop = UmTopAppBar._getScrollTop(container as any);\n\n this.containerScrolled = scrollTop > extendedContentHeight;\n\n this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n if (extendedContentHeight === 0) {\n return;\n }\n\n const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n if (scrollTop > scrollOffset) {\n this._extendedContent.style.opacity = '0';\n return;\n }\n\n this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n };\n\n private static _getScrollTop(container: HTMLElement & Window): number {\n if (typeof container.scrollY === 'number') {\n return container.scrollY;\n }\n\n if (typeof container.scrollTop === 'number') {\n return container.scrollTop;\n }\n\n return document.body.scrollTop;\n }\n\n #setContentHeightProperty() {\n this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-top-app-bar': UmTopAppBar;\n }\n}\n"]}
package/badge/badge.d.ts CHANGED
@@ -2,6 +2,9 @@ import { HTMLTemplateResult, LitElement } from 'lit';
2
2
  export declare class UmBadge extends LitElement {
3
3
  #private;
4
4
  static styles: import("lit").CSSResult;
5
+ /**
6
+ * Whether the badge is rendered as a static dot, without numeric content
7
+ */
5
8
  static: boolean;
6
9
  private _empty;
7
10
  protected render(): HTMLTemplateResult;
@@ -1 +1 @@
1
- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,0BAAU;IAEY,MAAM,UAAS;IAClD,OAAO,CAAC,MAAM,CAAQ;cAEZ,MAAM,IAAI,kBAAkB;CAiBhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
1
+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,0BAAU;IAEhC;;OAEG;IACyC,MAAM,UAAS;IAClD,OAAO,CAAC,MAAM,CAAQ;cAEZ,MAAM,IAAI,kBAAkB;CAiBhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
package/badge/badge.js CHANGED
@@ -6,6 +6,9 @@ import { styles } from './badge.styles.js';
6
6
  let UmBadge = class UmBadge extends LitElement {
7
7
  constructor() {
8
8
  super(...arguments);
9
+ /**
10
+ * Whether the badge is rendered as a static dot, without numeric content
11
+ */
9
12
  this.static = false;
10
13
  this._empty = true;
11
14
  }
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAC1C,WAAM,GAAG,IAAI,CAAC;IAmBjC,CAAC;aAtBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAKb,MAAM;QACvB,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,MAAM;SACnB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACe,gBAAgB;4BAClB,IAAI,CAAC,iBAAiB;;KAE7C,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC;IACjD,CAAC;;AAnB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgB;AAC1C;IAAhB,KAAK,EAAE;uCAAuB;AAJpB,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CAuBnB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './badge.styles.js';\n\n@customElement('u-badge')\nexport class UmBadge extends LitElement {\n static override styles = styles;\n\n @property({ type: Boolean, reflect: true }) static = false;\n @state() private _empty = true;\n\n protected override render(): HTMLTemplateResult {\n const containerClasses = classMap({\n static: this.static,\n empty: this._empty,\n });\n\n return html`\n <div class=\"container ${containerClasses}\" part=\"container\">\n <slot @slotchange=${this.#handleSlotChange}></slot>\n </div>\n `;\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._empty = !!slot.assignedElements().length;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-badge': UmBadge;\n }\n}\n"]}
1
+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGL;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAC1C,WAAM,GAAG,IAAI,CAAC;IAmBjC,CAAC;aAzBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAQb,MAAM;QACvB,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,MAAM;SACnB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACe,gBAAgB;4BAClB,IAAI,CAAC,iBAAiB;;KAE7C,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC;IACjD,CAAC;;AAnB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgB;AAC1C;IAAhB,KAAK,EAAE;uCAAuB;AAPpB,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CA0BnB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './badge.styles.js';\n\n@customElement('u-badge')\nexport class UmBadge extends LitElement {\n static override styles = styles;\n\n /**\n * Whether the badge is rendered as a static dot, without numeric content\n */\n @property({ type: Boolean, reflect: true }) static = false;\n @state() private _empty = true;\n\n protected override render(): HTMLTemplateResult {\n const containerClasses = classMap({\n static: this.static,\n empty: this._empty,\n });\n\n return html`\n <div class=\"container ${containerClasses}\" part=\"container\">\n <slot @slotchange=${this.#handleSlotChange}></slot>\n </div>\n `;\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this._empty = !!slot.assignedElements().length;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-badge': UmBadge;\n }\n}\n"]}