@redvars/peacock 3.1.0 → 3.1.2

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 (187) hide show
  1. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js +3 -3
  2. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.css.js.map +1 -1
  3. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +16 -3
  4. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +16 -3
  5. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
  6. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.d.ts +3 -0
  7. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js +10 -0
  8. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/p-avatar.js.map +1 -0
  9. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.d.ts +1 -0
  10. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js +34 -0
  11. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.css.js.map +1 -0
  12. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +23 -0
  13. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +54 -0
  14. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -0
  15. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.d.ts +1 -0
  16. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js +2 -0
  17. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/index.js.map +1 -0
  18. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.d.ts +3 -0
  19. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js +10 -0
  20. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/p-badge.js.map +1 -0
  21. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.d.ts +1 -0
  22. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js +12 -0
  23. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.css.js.map +1 -0
  24. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.d.ts +27 -0
  25. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js +58 -0
  26. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js.map +1 -0
  27. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.d.ts +1 -0
  28. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js +2 -0
  29. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/index.js.map +1 -0
  30. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.d.ts +1 -0
  31. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js +58 -0
  32. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.css.js.map +1 -0
  33. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.d.ts +28 -0
  34. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js +68 -0
  35. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js.map +1 -0
  36. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.d.ts +1 -0
  37. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js +2 -0
  38. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/index.js.map +1 -0
  39. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +15 -1
  40. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +10 -1
  41. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
  42. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.d.ts +1 -1
  43. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js +4 -4
  44. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/p-icon.js.map +1 -1
  45. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +5 -2
  46. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +5 -2
  47. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
  48. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.d.ts +1 -0
  49. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js +2 -0
  50. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/index.js.map +1 -0
  51. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.d.ts +2 -0
  52. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js +36 -0
  53. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.css.js.map +1 -0
  54. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.d.ts +12 -0
  55. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js +18 -0
  56. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/link/link.js.map +1 -0
  57. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +41 -2
  58. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
  59. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.d.ts +9 -0
  60. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js +46 -0
  61. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/styleMixins.css.js.map +1 -0
  62. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.d.ts +2 -0
  63. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js +70 -0
  64. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/text/text.css.js.map +1 -0
  65. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +1 -1
  66. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +32 -7
  67. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
  68. package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
  69. package/bin/typedoc-gen.mjs +64 -0
  70. package/custom-elements-manifest.config.mjs +8 -21
  71. package/demo/index.html +21 -9
  72. package/demo/int.html +2 -0
  73. package/dist/assets/styles/tokens.css +8 -1
  74. package/dist/{component/avatar.js → avatar.js} +23 -13
  75. package/dist/avatar.js.map +1 -0
  76. package/dist/badge.js +89 -0
  77. package/dist/badge.js.map +1 -0
  78. package/dist/class-map-DpvLRi0h.js +11 -0
  79. package/dist/class-map-DpvLRi0h.js.map +1 -0
  80. package/dist/clock.js +70 -0
  81. package/dist/clock.js.map +1 -0
  82. package/dist/custom-elements-jsdocs.json +656 -0
  83. package/dist/directive-BKuZRRPO.js +9 -0
  84. package/dist/directive-BKuZRRPO.js.map +1 -0
  85. package/dist/divider.js +123 -0
  86. package/dist/divider.js.map +1 -0
  87. package/dist/{component/Icon.js → icon.js} +15 -9
  88. package/dist/icon.js.map +1 -0
  89. package/dist/index.js +11 -88
  90. package/dist/index.js.map +1 -1
  91. package/dist/peacock-loader.js +141 -3
  92. package/dist/peacock-loader.js.map +1 -1
  93. package/dist/property-D4Kn9TsY.js +63 -0
  94. package/dist/property-D4Kn9TsY.js.map +1 -0
  95. package/dist/src/avatar/avatar.d.ts +16 -3
  96. package/dist/src/avatar/p-avatar.d.ts +3 -0
  97. package/dist/src/badge/badge.css.d.ts +1 -0
  98. package/dist/src/badge/badge.d.ts +23 -0
  99. package/dist/src/badge/index.d.ts +1 -0
  100. package/dist/src/badge/p-badge.d.ts +3 -0
  101. package/dist/src/clock/clock.css.d.ts +1 -0
  102. package/dist/src/clock/clock.d.ts +27 -0
  103. package/dist/src/clock/index.d.ts +1 -0
  104. package/dist/src/divider/divider.css.d.ts +1 -0
  105. package/dist/src/divider/divider.d.ts +28 -0
  106. package/dist/src/divider/index.d.ts +1 -0
  107. package/dist/src/icon/icon.d.ts +15 -1
  108. package/dist/src/icon/p-icon.d.ts +1 -1
  109. package/dist/src/index.d.ts +5 -2
  110. package/dist/src/link/link.css.d.ts +2 -0
  111. package/dist/src/styleMixins.css.d.ts +9 -0
  112. package/dist/src/text/text.css.d.ts +2 -0
  113. package/dist/src/utils.d.ts +1 -1
  114. package/dist/state-CxzmLNIi.js +10 -0
  115. package/dist/state-CxzmLNIi.js.map +1 -0
  116. package/dist/styleMixins.css-CivfMYtB.js +17 -0
  117. package/dist/styleMixins.css-CivfMYtB.js.map +1 -0
  118. package/dist/tsconfig.tsbuildinfo +1 -1
  119. package/dist/{src/utils.js → utils-_5no4mk7.js} +37 -10
  120. package/dist/utils-_5no4mk7.js.map +1 -0
  121. package/package.json +17 -9
  122. package/readme.md +178 -0
  123. package/rollup.config.js +72 -34
  124. package/scratch.mjs +0 -0
  125. package/src/avatar/avatar.css.ts +3 -3
  126. package/src/avatar/avatar.ts +16 -3
  127. package/src/avatar/demo/index.html +2 -2
  128. package/src/avatar/p-avatar.ts +5 -0
  129. package/src/badge/badge.css.ts +34 -0
  130. package/src/badge/badge.ts +51 -0
  131. package/src/badge/demo/index.html +62 -0
  132. package/src/badge/index.ts +1 -0
  133. package/src/badge/p-badge.ts +5 -0
  134. package/src/clock/clock.css.ts +12 -0
  135. package/src/clock/clock.ts +57 -0
  136. package/src/clock/demo/index.html +26 -0
  137. package/src/clock/index.ts +1 -0
  138. package/src/divider/demo/index.html +58 -0
  139. package/src/divider/divider.css.ts +58 -0
  140. package/src/divider/divider.ts +65 -0
  141. package/src/divider/index.ts +1 -0
  142. package/src/icon/demo/index.html +4 -4
  143. package/src/icon/icon.ts +16 -2
  144. package/src/icon/p-icon.ts +1 -1
  145. package/src/index.ts +5 -2
  146. package/src/link/link.css.ts +36 -0
  147. package/src/peacock-loader.ts +49 -2
  148. package/src/styleMixins.css.ts +55 -0
  149. package/src/styles.d.ts +11 -0
  150. package/src/text/text.css.ts +76 -0
  151. package/src/utils.ts +42 -7
  152. package/tsconfig.json +1 -1
  153. package/README.md +0 -46
  154. package/custom-elements.md +0 -268
  155. package/demo/tokens.css +0 -510
  156. package/dist/component/Icon.js.map +0 -1
  157. package/dist/component/avatar.js.map +0 -1
  158. package/dist/icon-1wpxQtrZ.js +0 -341
  159. package/dist/icon-1wpxQtrZ.js.map +0 -1
  160. package/dist/src/LoaderUtils.js +0 -81
  161. package/dist/src/LoaderUtils.js.map +0 -1
  162. package/dist/src/avatar/avatar.css.js +0 -41
  163. package/dist/src/avatar/avatar.css.js.map +0 -1
  164. package/dist/src/avatar/avatar.js +0 -49
  165. package/dist/src/avatar/avatar.js.map +0 -1
  166. package/dist/src/avatar/index.js +0 -2
  167. package/dist/src/avatar/index.js.map +0 -1
  168. package/dist/src/icon/datasource.js +0 -20
  169. package/dist/src/icon/datasource.js.map +0 -1
  170. package/dist/src/icon/icon.css.js +0 -22
  171. package/dist/src/icon/icon.css.js.map +0 -1
  172. package/dist/src/icon/icon.js +0 -124
  173. package/dist/src/icon/icon.js.map +0 -1
  174. package/dist/src/icon/index.js +0 -2
  175. package/dist/src/icon/index.js.map +0 -1
  176. package/dist/src/icon/p-icon.js +0 -15
  177. package/dist/src/icon/p-icon.js.map +0 -1
  178. package/dist/src/index.js +0 -3
  179. package/dist/src/index.js.map +0 -1
  180. package/dist/src/peacock-loader.js +0 -16
  181. package/dist/src/peacock-loader.js.map +0 -1
  182. package/dist/src/utils.js.map +0 -1
  183. package/dist/test/icon.test.js +0 -14
  184. package/dist/test/icon.test.js.map +0 -1
  185. package/dist/utils-CSwoJIcG.js +0 -171
  186. package/dist/utils-CSwoJIcG.js.map +0 -1
  187. package/readme-gen.mjs +0 -11
@@ -0,0 +1 @@
1
+ {"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.css.ts","../../src/avatar/avatar.ts"],"sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n pointer-events: none;\n --avatar-size: 2rem;\n --avatar-background-color: var(--color-primary);\n --avatar-text-color: var(--color-on-primary);\n --avatar-border-radius: var(--global-avatar-border-radius);\n }\n\n .avatar-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-050);\n line-height: 0;\n }\n\n .avatar {\n border-radius: var(--avatar-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--avatar-text-color);\n width: var(--avatar-size);\n height: var(--avatar-size);\n ${getTypography('body-large-emphasized')}\n background-color: var(--avatar-background-color);\n\n font-size: calc(var(--avatar-size) * 0.4);\n\n .image {\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n }\n }\n`;\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './avatar.css.js';\n\n/**\n * @label Avatar\n * @tag p-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <p-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.webp\"></p-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"],"names":["css","LitElement","html","classMap","property"],"mappings":";;;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;MAyBnB,aAAa,CAAC,uBAAuB,CAAC;;;;;;;;;;;;CAY3C;;ACnCD;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,MAAO,SAAQC,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;IAwB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AAzBO,MAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CE,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;;;;"}
package/dist/badge.js ADDED
@@ -0,0 +1,89 @@
1
+ import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
2
+ import { r } from './state-CxzmLNIi.js';
3
+ import { e } from './class-map-DpvLRi0h.js';
4
+ import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
5
+ import { o as observerSlotChangesWithCallback } from './utils-_5no4mk7.js';
6
+ import './directive-BKuZRRPO.js';
7
+
8
+ const styles = i `
9
+ :host {
10
+ display: inline-block;
11
+ --badge-color: var(--global-badge-color);
12
+ }
13
+
14
+ .badge {
15
+ pointer-events: none;
16
+ z-index: var(--z-index-badge);
17
+ color: var(--color-white);
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ background-color: var(--badge-color);
22
+ border-radius: var(--shape-corner-full);
23
+ box-sizing: border-box;
24
+
25
+ &.slot-has-content {
26
+ height: 1rem;
27
+ min-width: 1rem;
28
+ padding-inline: var(--spacing-050);
29
+ ${getTypography('label-small')};
30
+ color: var(--color-on-error);
31
+ }
32
+
33
+ &:not(.slot-has-content) {
34
+ height: 0.375rem;
35
+ width: 0.375rem;
36
+ }
37
+ }
38
+ `;
39
+
40
+ /**
41
+ * @label Badge
42
+ * @tag p-badge
43
+ * @rawTag badge
44
+ * @summary The badge component is used to display a small amount of information to the user.
45
+ *
46
+ * @cssprop --badge-color - Controls the color of the badge.
47
+ *
48
+ * @example
49
+ * ```html
50
+ * <p-badge>1</p-badge>
51
+ * ```
52
+ * @tags display
53
+ */
54
+ class Badge extends i$1 {
55
+ constructor() {
56
+ super(...arguments);
57
+ this.name = '';
58
+ this.slotHasContent = false;
59
+ }
60
+ firstUpdated() {
61
+ observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
62
+ this.slotHasContent = hasContent;
63
+ this.requestUpdate();
64
+ });
65
+ }
66
+ render() {
67
+ return b `<div
68
+ class=${e({
69
+ badge: true,
70
+ 'slot-has-content': this.slotHasContent,
71
+ })}
72
+ >
73
+ <slot></slot>
74
+ </div>`;
75
+ }
76
+ }
77
+ Badge.styles = [styles];
78
+ __decorate([
79
+ n({ type: String, reflect: true })
80
+ ], Badge.prototype, "name", void 0);
81
+ __decorate([
82
+ n({ type: String, reflect: true })
83
+ ], Badge.prototype, "src", void 0);
84
+ __decorate([
85
+ r()
86
+ ], Badge.prototype, "slotHasContent", void 0);
87
+
88
+ export { Badge };
89
+ //# sourceMappingURL=badge.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"badge.js","sources":["../../src/badge/badge.css.ts","../../src/badge/badge.ts"],"sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n --badge-color: var(--global-badge-color);\n }\n\n .badge {\n pointer-events: none;\n z-index: var(--z-index-badge);\n color: var(--color-white);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--badge-color);\n border-radius: var(--shape-corner-full);\n box-sizing: border-box;\n\n &.slot-has-content {\n height: 1rem;\n min-width: 1rem;\n padding-inline: var(--spacing-050);\n ${getTypography('label-small')};\n color: var(--color-on-error);\n }\n\n &:not(.slot-has-content) {\n height: 0.375rem;\n width: 0.375rem;\n }\n }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './badge.css.js';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Badge\n * @tag p-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <p-badge>1</p-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n @state()\n slotHasContent = false;\n\n firstUpdated() {\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'slot-has-content': this.slotHasContent,\n })}\n >\n <slot></slot>\n </div>`;\n }\n}\n"],"names":["css","LitElement","html","classMap","property","state"],"mappings":";;;;;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;QAqBjB,aAAa,CAAC,aAAa,CAAC,CAAA;;;;;;;;;CASnC;;AC3BD;;;;;;;;;;;;;AAaG;AACG,MAAO,KAAM,SAAQC,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;QAK5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAsBxB;IApBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;WAGG;IACT;;AA5BO,KAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAGxD,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}
@@ -0,0 +1,11 @@
1
+ import { E } from './property-D4Kn9TsY.js';
2
+ import { e as e$1, i, t } from './directive-BKuZRRPO.js';
3
+
4
+ /**
5
+ * @license
6
+ * Copyright 2018 Google LLC
7
+ * SPDX-License-Identifier: BSD-3-Clause
8
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
9
+
10
+ export { e };
11
+ //# sourceMappingURL=class-map-DpvLRi0h.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"class-map-DpvLRi0h.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
package/dist/clock.js ADDED
@@ -0,0 +1,70 @@
1
+ import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
2
+ import { r } from './state-CxzmLNIi.js';
3
+ import { g as getTypography } from './styleMixins.css-CivfMYtB.js';
4
+
5
+ const styles = i `
6
+ :host {
7
+ display: inline-block;
8
+ }
9
+
10
+ .current-time {
11
+ ${getTypography('body-medium')}
12
+ }
13
+ `;
14
+
15
+ /**
16
+ * @label Clock
17
+ * @tag p-clock
18
+ * @rawTag clock
19
+ *
20
+ * @summary Displays the current time in a given timezone.
21
+ * @overview
22
+ * - Clocks are used to display the current time in a specified timezone.
23
+ * - They can be displayed in various formats, including 12-hour and 24-hour time.
24
+ *
25
+ * @example
26
+ * ```html
27
+ * <p-clock></p-clock>
28
+ * ```
29
+ * @tags display
30
+ */
31
+ class Clock extends i$1 {
32
+ constructor() {
33
+ super(...arguments);
34
+ // `currentTime` is decorated with `@State()`,
35
+ // as we need to trigger a rerender when its
36
+ // value changes to show the latest time
37
+ this.currentTime = '';
38
+ }
39
+ connectedCallback() {
40
+ super.connectedCallback();
41
+ this.__updateCurrentTime();
42
+ this._timerId = setInterval(() => {
43
+ this.__updateCurrentTime();
44
+ }, 1000);
45
+ }
46
+ disconnectedCallback() {
47
+ if (this._timerId) {
48
+ clearInterval(this._timerId);
49
+ }
50
+ super.disconnectedCallback();
51
+ }
52
+ __updateCurrentTime() {
53
+ this.currentTime = new Date().toLocaleTimeString('en-US', {
54
+ timeZone: this.timezone,
55
+ });
56
+ }
57
+ render() {
58
+ return b `<div class="current-time">${this.currentTime}</div>`;
59
+ }
60
+ }
61
+ Clock.styles = [styles];
62
+ __decorate([
63
+ n()
64
+ ], Clock.prototype, "timezone", void 0);
65
+ __decorate([
66
+ r()
67
+ ], Clock.prototype, "currentTime", void 0);
68
+
69
+ export { Clock };
70
+ //# sourceMappingURL=clock.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clock.js","sources":["../../src/clock/clock.css.ts","../../src/clock/clock.ts"],"sourcesContent":["import { css } from 'lit';\nimport { getTypography } from '../styleMixins.css.js';\n\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .current-time {\n ${getTypography('body-medium')}\n }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { styles } from './clock.css.js';\n\n/**\n * @label Clock\n * @tag p-clock\n * @rawTag clock\n *\n * @summary Displays the current time in a given timezone.\n * @overview\n * - Clocks are used to display the current time in a specified timezone.\n * - They can be displayed in various formats, including 12-hour and 24-hour time.\n *\n * @example\n * ```html\n * <p-clock></p-clock>\n * ```\n * @tags display\n */\nexport class Clock extends LitElement {\n static styles = [styles];\n\n @property() timezone?: string;\n\n // `currentTime` is decorated with `@State()`,\n // as we need to trigger a rerender when its\n // value changes to show the latest time\n @state() currentTime: string = '';\n\n private _timerId: any;\n\n connectedCallback() {\n super.connectedCallback();\n this.__updateCurrentTime();\n this._timerId = setInterval(() => {\n this.__updateCurrentTime();\n }, 1000);\n }\n\n disconnectedCallback() {\n if (this._timerId) {\n clearInterval(this._timerId);\n }\n super.disconnectedCallback();\n }\n\n __updateCurrentTime() {\n this.currentTime = new Date().toLocaleTimeString('en-US', {\n timeZone: this.timezone,\n });\n }\n\n render() {\n return html`<div class=\"current-time\">${this.currentTime}</div>`;\n }\n}\n"],"names":["css","LitElement","html","property","state"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;MAMnB,aAAa,CAAC,aAAa,CAAC;;CAEjC;;ACPD;;;;;;;;;;;;;;;AAeG;AACG,MAAO,KAAM,SAAQC,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;;;;QAQW,IAAA,CAAA,WAAW,GAAW,EAAE;IA4BnC;IAxBE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;YAC/B,IAAI,CAAC,mBAAmB,EAAE;QAC5B,CAAC,EAAE,IAAI,CAAC;IACV;IAEA,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC9B;QACA,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,IAAI,CAAC,WAAW,QAAQ;IAClE;;AAlCO,KAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAKrB,UAAA,CAAA;AAAR,IAAAC,CAAK;AAA4B,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;;;;"}